小程序模板网

微信小程序问题汇总及详解《二》tab切换

发布时间:2018-04-17 09:42 所属栏目:小程序开发教程

作者:JoyJin,来自原文地址 
设置背景颜色就直接在page里设置 page {background-color: rgb(242, 242, 242);}

tab切换:

navigator 页面链接 

传参的格式为url="路径?title={{item.title}}" 多个用&&连接

下个页面接收参数:

wxml:

 

				
  1. <view class="container">
  2. <view class="swiper-tab">
  3. <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">进行中</view>
  4. <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">已完成</view>
  5. </view>
  6. <swiper current="{{currentTab}}" class="swiper-box" duration="800" style="height:{{winHeight - 71}}px" bindchange="bindChange">
  7.  
  8. <!-- 朴智妍一 -->
  9. <swiper-item>
  10. <view class="content" wx:for="{{loadingList}}" wx:key="id" >
  11. <navigator bindtap="bindIndexId" data-index-id="{{item.id}}" url="../..?act_name={{item.act_name}}&&pro_name={{item.pro_name}}">
  12. <image src="{{item.act_pic}}"></image>
  13. <view class="txt1">{{item.act_name}}</view>
  14. <view>{{item.pro_name}}</view>
  15. </navigator>
  16. </view>
  17. <view class="hb" bindtap="addProject">
  18. <image src="../Image/addT.png" style="width:30rpx;height:30rpx;float:left;margin-top:3rpx;margin-right:16rpx;"></image>
  19. <view class="text2">添加项目</view>
  20. </view>
  21. </swiper-item>
  22. </swiper>
  23. </view>

wxss:

 

				
  1. page {
  2. background-color: rgb(242, 242, 242); /*设置背景颜色就直接在page里设置*/
  3. }
  4.  
  5. .container {
  6. width: 100%;
  7. }
  8.  
  9. .swiper-tab {
  10. width: 84%;
  11. text-align: center;
  12. line-height: 60rpx;
  13. margin-top: 40rpx;
  14. margin-bottom: 20rpx;
  15. border: 2rpx solid #1c7bf3;
  16. border-radius: 6rpx;
  17. }
  18.  
  19. .swiper-tab-list {
  20. font-size: 28rpx;
  21. display: inline-block;
  22. width: 50%;
  23. float: left;
  24. color: #1c7bf3;


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23512.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询