首页 > 微信 > 详细

小程序 3

时间:2019-11-12 19:03:14      阅读:86      评论:0      收藏:0      [点我收藏+]

小程序常用组件及应用(wxml中使用)

 

1. 制作顶部一行多列的导航栏

  data: {
    cont: 0,
    list:[‘one‘, ‘two‘, ‘three‘],
    data:[‘12312321312321312312‘,‘252525252525466262426426465‘, ‘99999999999999999999999‘],
  },

  tab_btn: function (e) {
    this.setData({
      cont: e.target.dataset.index
    })
  },
 1 <view>
 2   <view class=‘line_tab‘>
 3     <view wx:for="{{list}}" wx:key="list_key" class=‘tab_context‘>
 4       <view class=‘{{cont == index ? "tab_on": " "}}‘ data-index="{{index}}" bindtap=‘tab_btn‘>{{item}}</view>
 5     </view>  
 6   </view>
 7   <view>
 8     <view>{{data[cont]}}</view>
 9   </view>
10 </view>
.line_tab {
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.tab_context {
  color: white;
  border-bottom: solid 1rpx black;
}
.tab_on{
  color: burlywood;
  border-bottom: solid 1rpx orange;
}

 

2. 轮播图制作:swiper

  a. 滑块视图容器(此组件中间只能放swiper-item组件,swiper-item中放内容)

  

小程序 3

原文:https://www.cnblogs.com/leafchen/p/11844270.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!