微信小程序--問題匯總及詳解之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
        })
      }
    });