小程序基础组件与导航组件

淡淡的烟草味﹌ 2021-12-17 11:51 344阅读 0赞

1.基础组件

1.1 图标 icon

1.2 文本 text

1.3 进度条 progress

2.导航组件(navigator)

1.基础组件

1.1 图标 icon

(1)总结

![20170220133828384][]

(2) 案例

效果截图

![20170220133911057][]

page.wxml

page.js

//获取应用实例
    var app = getApp()
    Page({
    data:{
    iconType:[
     'success','success_circle','success_on_circle','waiting','waiting_circle','safe_success','safe_warn','warn','info',
     'info_circle','circle','download','cancel','search','clear'
     ]
     },
    })

1.2 文本 text

(1) 案例

效果图

![20170220133944369][]

page.wxml

<view class="main">
     <view class="text-view">
     <text class="show-text">{
       {text}}</text>
     </view>
     <view class="bt-view">
     <button bindtap="addLine" class="show-text">{
       {add}}</button>
     <button bindtap="removeLine" class="show-text">{
       {remove}}</button>
     </view>
    </view>

page.js

//获取应用实例
    var app = getApp()
    //定义额外的文本内容数组
    var extraLine = [];
    //初始化文本
    var init='Initdata! \n'
    Page({
    data:{
    text:init,
    add:'添加',
    remove:'删除'
     },
    /*
    *添加一行内容
    */
    addLine:function(e){
    extraLine.push("This line is new add!")
     this.setData({
    text:init+extraLine.join('\n')
     })
    },
    /*
    *删除一行内容
    */
    removeLine:function(e){
     if (extraLine.length > 0) {
    extraLine.pop()
     this.setData({
    text:init + '\n' + extraLine.join('\n')
     })
     }
    },
    })

page.wxss

.show-text{
    font-size: 10pt;
    margin-left: 20rpx;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    }
    .text-view{
    padding: 10rpx;
    }
    button{
    margin: 10rpx;
    }

1.3 进度条 progress

(1)总结

![20170220134032590][]

(2)案例

效果图

![20170220134100932][]

page.wxml

page.wxss

progress{
    margin: 50rpx;
    }

2.导航组件(navigator)

(1) 总结

![20170220134142670][]

(2) 案例

效果图

![20170220134157089][]

main.wxml

<view class="nav-view">
     <navigator open-type="navigate" url="../navigator/navigator" class="nav-item" hover-class="nav-hover">导航到新页面</navigator>
     <navigator open-type="redirect" url="../navigator/navigator" class="nav-item" hover-class="nav-hover">当前页面</navigator>
     <navigator open-type="switchTab" url="../index/index" class="nav-item" hover-class="nav-hover">切换Tab</navigator>
    </view>

main.wxss

.nav-hover{
    color: white;
    background-color: black;
    }
    .nav-item{
    margin: 20rpx;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    padding: 10rpx;
    display: inline-flex;
    }

navigator.wxml

<view class="info">导航到的新页面</view>

参考：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

[20170220133828384]: /images/20211213/790408383fcf4dd5ad3fa2fc077c726b.png
[20170220133911057]: /images/20211213/2e9bec91077c458790648fc960a90497.png
[20170220133944369]: /images/20211213/9432ff21911e448e9a56cb7a13ef1f9c.png
[20170220134032590]: /images/20211213/bc3bd22880b5410eaaa9a7bc1117a155.png
[20170220134100932]: /images/20211213/d682dfb528ca440883db38070e5b8f38.png
[20170220134142670]: /images/20211213/b3888b3fede147cfb369e2b88c07246d.png
[20170220134157089]: /images/20211213/afc7c97cc441436db32f82c728f089f0.png