微信小程序 基础组件与导航组件详细介绍

微信小程序 基础组件与导航组件详细介绍

微信小程序 基础组件与导航组件详解：

1.基础组件

1.1 图标 icon

1.2 文本 text

1.3 进度条 progress

2.导航组件(navigator)

1.基础组件

1.1 图标 icon

(1)总结

(2) 案例

效果截图

page.wxml

page.js

//获取应用实例

var ahttp://pp = 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) 案例

效果图

page.wxml

{{text}}

{{add}}

{{remove}}

  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)总结

(2)案例

效果图

page.wxml

page.wxss

progress{

margin: 50rpx;

}

2.导航组件(navigator)

(1) 总结

(2) 案例

效果图

main.wxml

导航到新页面

当前页面

切换Tab

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

导航到的新页面

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。