资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

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

成都创新互联专业提供成都主机托管四川主机托管成都服务器托管四川服务器托管,支持按月付款!我们的承诺:贵族品质、平民价格,机房位于中国电信/网通/移动机房,绵阳电信机房服务有保障!

    1.基础组件

       1.1 图标 icon

       1.2 文本 text

       1.3 进度条 progress

    2.导航组件(navigator)

 1.基础组件   

1.1 图标 icon

(1)总结

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

(2) 案例

    效果截图

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

    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) 案例

    效果图

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

    page.wxml


 
  {{text}}
 
 
  
  
  

    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

导航到的新页面

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


新闻名称:微信小程序基础组件与导航组件详细介绍
文章出自:http://cdkjz.cn/article/gjgceo.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220