微信小程序--问题汇总及详解之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
        })
      }
    });