微信小程式 tab切換
阿新 • • 發佈:2019-01-03
設定背景顏色就直接在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 }) } });