推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序问题汇总及详解《二》tab切换
发布时间:2020-12-01
作者：JoyJin，来自原文地址
设置背景颜色就直接在page里设置 page {background-color: rgb(242, 242, 242);}
tab切换：
navigator 页面链接
传参的格式为url="路径?title={{item.title}}" 多个用&&连接
下个页面接收参数：
wxml:
<view class="container">
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">进行中</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">已完成</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="800" style="height:{{winHeight - 71}}px" bindchange="bindChange">
<!-- 朴智妍一 -->
<swiper-item>
<view class="content" wx:for="{{loadingList}}" wx:key="id" >
<navigator bindtap="bindIndexId" data-index-id="{{item.id}}" url="../..?act_name={{item.act_name}}&&pro_name={{item.pro_name}}">
<image src=http://www.yiyongtong.com/archives/"{{item.act_pic}}"></image>
<view class="txt1">{{item.act_name}}</view>
<view>{{item.pro_name}}</view>
</navigator>
</view>
<view class="hb" bindtap="addProject">
<image src=http://www.yiyongtong.com/archives/"../Image/addT.png" style="width:30rpx;height:30rpx;float:left;margin-top:3rpx;margin-right:16rpx;"></image>
<view class="text2">添加项目</view>
</view>
</swiper-item>
</swiper>
</view>
wxss:
page {
background-color: rgb(242, 242, 242); /*设置背景颜色就直接在page里设置*/
}
.container {
width: 100%;
}
.swiper-tab {
width: 84%;
text-align: center;
line-height: 60rpx;
margin-top: 40rpx;
margin-bottom: 20rpx;
border: 2rpx solid #1c7bf3;
border-radius: 6rpx;
}
.swiper-tab-list {
font-size: 28rpx;
display: inline-block;
width: 50%;
