微信小程序 tab切换

设置背景颜色就直接在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="{{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="../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%;
float: left;
color: #1c7bf3;
}

.on {
color: #fff;
background-color: #1c7bf3;
box-shadow: 0 0 20rpx #d1e5fd;
}

.swiper-box {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}

image {
width: 140rpx;
height: 140rpx;
display: inline-block;
overflow: hidden;
border-radius: 100%;
float: left;
margin-top: 36rpx;
margin-left: 26rpx;
margin-right: 30rpx;
}

.content {
width: 94%;
height: 220rpx;
box-shadow: 0 0 20rpx #bbb;
margin: auto;
margin-top: 22rpx;
line-height: 220rpx;
font-size: 32rpx;
margin-left: 3%;
background: #fff;
border-radius: 8rpx;
}

.content>view {
float: left;
}

.txt1 {
color: #ff5438;
}

.hb {
text-align: center;
margin-top:70rpx;
font-size: 28rpx;
width: 100%;
margin-left:36%;
}

.text2 {
color: #bbb;
float: left;
}

view {
display: inline-block;
}

js:

/*获取系统信息*/
wx.getSystemInfo({
success: function (res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
})
},

/**  滑动切换tab  **/
bindChange: function (e) {
var that = this;
that.setData({ currentTab: e.detail.current });

},
/**  点击tab切换  **/
swichNav: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},

var app = getApp()
Page({
data: {
winWidth: 0,  /* 页面配置*/
winHeight: 0,
currentTab: 0,   // tab切换
oneList: [{     //遍历数组，前台需要请求遍历的参数
id: '',
act_pic:'',
act_name: '',
pro_name: '',
}],
},
//获取点击的产品ID，并保存在本地缓存   (进行中)
bindIndexId: function (e) {
var indexId = e.currentTarget.dataset.indexId
wx.setStorageSync('indexId', indexId)
},
onLoad: function () {
var that = this;
var tokend = wx.getStorageSync('tokend') //取token
//刷新页面后得到进行中的数据
wx.request({
method: 'GET',
url: 'https://....?token=' + tokend,
header: {'content-type': 'application/json'},
data: {},
success: function (res) {  // success
console.log(res)
that.setData({     //将后台数值与前台数组匹配（集合）
loadingList: res.data.data
})
}
});