设置背景颜色就直接在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.indexIdwx.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})}});
如果觉得《微信小程序 tab切换》对你有帮助，请点赞、收藏，并留下你的观点哦！
