NO--15 微信小程序，scroll-view選項卡和跳轉

大多數的商城類小程序都有這個功能，點擊「所有訂單」，「待付款」，「待發貨」，「待收貨」，「已完成」，會跳轉頁面且跳至與之相對應的選項卡中。因此咱們在開發該小程序時也作了相同的功能。以下圖：

 

scroll-view與跳轉.gif

可是咱們在最後作交互的時候，並無使用該效果，下篇再說這個！先說說這個效果是如何實現的！

選項卡靜態佈局思路： 主要用到 scroll-view與 swiper標籤，選項卡切換主要依靠 swiper 中的 current 屬性，不懂請自行查看小程序API。
跳轉頁面且跳至與之相對應的選項卡思路：
首先在 app.js 中配置 globalData。
在「我的中心」 js 文件中配置點擊該項跳轉至與之對應的 tab 的 index。
在「我的中心」跳轉頁面時經過 globalData 傳遞 index 給「所有訂單」頁面，「所有訂單」頁面經過 app.globalData.currentLocation 接受數據，改變選項卡的切換。

app.js 代碼

globalData: { userInfo: null } 

我的中心 wxml 代碼

<!--九宮格 --> <view class="page"> <view class="page__bd"> <view class="weui-grids"> <view class="allrec" bindtap="allForm"> <text>個人訂單</text> <view class="more">查看更多訂單</view> <image class='moreImg' src='../../img/more.png'></image> </view> <!--待付款 --> <view class="weui-grid" hover-class="weui-grid_active" bindtap="noPay"> <image class="weui-grid__icon" src="../../img/wallet.png" /> <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view> <view class="weui-grid__label label">待付款</view> </view> <!--待發貨 --> <view class="weui-grid" hover-class="weui-grid_active" bindtap="noSend"> <image class="weui-grid__icon" src="../../img/wallet-1.png" /> <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view> <view class="weui-grid__label label">待發貨</view> </view> <!--已發貨 --> <view class="weui-grid" hover-class="weui-grid_active" bindtap="sended"> <image class="weui-grid__icon" src="../../img/wallet-2.png" /> <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view> <view class="weui-grid__label label">待收貨</view> </view> <!--已完成 --> <view class="weui-grid" hover-class="weui-grid_active" bindtap="completed"> <image class="weui-grid__icon" src="../../img/wallet-3.png" /> <view class="weui-grid__label label">已完成</view> </view> </view> </view> </view> 

我的中心 js 代碼

var app = getApp() var util = require('../../utils/util.js') var formatLocation = util.formatLocation Page({ data: { }, // 指定 所有訂單 和 九宮格中按鈕 點擊跳轉至 選項卡中 與之對應的tab allForm:function(){ app.globalData.currentLocation = 0, wx.navigateTo({ url: '../orderForm/orderForm' }) }, noPay:function(){ app.globalData.currentLocation = 1, wx.navigateTo({ url: '../orderForm/orderForm' }) }, noSend:function(){ app.globalData.currentLocation = 2, wx.navigateTo({ url: '../orderForm/orderForm' }) }, sended:function(){ app.globalData.currentLocation = 3, wx.navigateTo({ url: '../orderForm/orderForm' }) }, completed:function(){ app.globalData.currentLocation = 4, wx.navigateTo({ url: '../orderForm/orderForm' }) } }) 

我的中心 wxss 代碼 (樣式可能會不全，須要引入weui.wxss文件)

/*九宮格 */ .weui-grids{ border-left: none; } .weui-grid{ width: 25%; border: none; position: relative; padding:20px 10px 10px; } .weui-grid .weui-badge{ width: 12rpx; height: 28rpx; border-radius: 50%; position: absolute; right: 40rpx; top: 20rpx; background: #df0202; } /* list */ .weui-cell__hd{ margin-right: 30rpx; vertical-align: middle; width:20px; height: 20px; } .weui-cell__hd image{ width: 50rpx; height: 50rpx; } .weui-cell__ft{ color: #fff; background: #dd3838; border-radius: 20rpx; text-align: center; margin-right: 10rpx; padding: 0 5rpx; } .all{ font-size: 30rpx; } 

所有訂單 wxml 代碼

<!--所有訂單頁 --> <!--選項卡標題 --> <scroll-view scroll-x="true" bindscroll="scroll" class="scroll-view_H list-liu"> <view class="scroll-view-item_H swiper-tab-list {{currentTab==0?'on':''}}" data-current="0" bindtap="swichNav" hover-class="eee">所有</view> <view class="scroll-view-item_H swiper-tab-list {{currentTab==1?'on':''}}" data-current="1" bindtap="swichNav" hover-class="eee">待付款</view> <view class="scroll-view-item_H swiper-tab-list {{currentTab==2?'on':''}}" data-current="2" bindtap="swichNav" hover-class="eee">待發貨</view> <view class="scroll-view-item_H swiper-tab-list {{currentTab==3?'on':''}}" data-current="3" bindtap="swichNav" hover-class="eee">已發貨</view> <view class="scroll-view-item_H swiper-tab-list {{currentTab==4?'on':''}}" data-current="4" bindtap="swichNav" hover-class="eee">已完成</view> </scroll-view> <!-- 選項卡內容 --> <swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange" style="height:{{clientHeight?clientHeight+'px':'auto'}}"> <!-- 所有訂單 內容 --> <swiper-item> <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}"> <view class="kong"></view> <!--寫入顯示內容 --> <view class="list" wx:for="{{carts}}" wx:key="*this"> <!-- 圖片 --> <view class="pic"> <image src="{{item.imgurl}}"></image> </view> <!-- 類型表述 --> <view class="con"> <text class="type1">{{item.type1}}</text> <text class="type2">{{item.type2}}</text> </view> <!-- 價格 --> <view class="price"> <text class="price1">￥{{item.price}}</text> <text class="number">×{{item.num}}</text> </view> </view> </scroll-view> </swiper-item> <!-- 待付款 內容 --> <swiper-item> <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}"> <view class="kong"></view> <!--寫入顯示內容 --> <view class="list" wx:for="{{carts}}" wx:key="*this"> <!-- 圖片 --> <view class="pic"> <image src="{{item.imgurl}}"></image> </view> <!-- 類型表述 --> <view class="con"> <text class="type1">{{item.type1}}</text> <text class="type2">{{item.type2}}</text> </view> <!-- 價格 --> <view class="price"> <text class="price1">￥{{item.price}}</text> <text class="number">×{{item.num}}</text> </view> </view> </scroll-view> </swiper-item> <!-- 待發貨 內容 --> <swiper-item> <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}"> <view class="kong"></view> <!--寫入顯示內容 --> <view class="list" wx:for="{{carts}}" wx:key="*this"> <!-- 圖片 --> <view class="pic"> <image src="{{item.imgurl}}"></image> </view> <!-- 類型表述 --> <view class="con"> <text class="type1">{{item.type1}}</text> <text class="type2">{{item.type2}}</text> </view> <!-- 價格 --> <view class="price"> <text class="price1">￥{{item.price}}</text> <text class="number">×{{item.num}}</text> </view> </view> </scroll-view> </swiper-item> <!-- 已發貨 內容 --> <swiper-item> <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}"> <view class="kong"></view> <!--寫入顯示內容 --> <view class="list" wx:for="{{carts}}" wx:key="*this"> <!-- 圖片 --> <view class="pic"> <image src="{{item.imgurl}}"></image> </view> <!-- 類型表述 --> <view class="con"> <text class="type1">{{item.type1}}</text> <text class="type2">{{item.type2}}</text> </view> <!-- 價格 --> <view class="price"> <text class="price1">￥{{item.price}}</text> <text class="number">×{{item.num}}</text> </view> </view> </scroll-view> </swiper-item> <!-- 已完成 內容 --> <swiper-item> <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}"> <view class="kong"></view> <!--寫入顯示內容 --> <view class="list" wx:for="{{carts}}" wx:key="*this"> <!-- 圖片 --> <view class="pic"> <image src="{{item.imgurl}}"></image> </view> <!-- 類型表述 --> <view class="con"> <text class="type1">{{item.type1}}</text> <text class="type2">{{item.type2}}</text> </view> <!-- 價格 --> <view class="price"> <text class="price1">￥{{item.price}}</text> <text class="number">×{{item.num}}</text> </view> </view> </scroll-view> </swiper-item> </swiper> 

所有訂單 js 代碼

// 所有訂單頁 //獲取應用實例 var app = getApp() Page({ /*** 頁面的初始數據 */ data: { // 選項卡 winWidth: 0, winHeight: 0, // tab切換 currentTab: 0, // 商品內容數據 carts: [ { imgurl: '../../img/fen-2.jpg', type1: '【老酒特賣】45℃老白汾十年陳釀500ML(2008-2009)', type2: '清香型', price: 100, num: 1 }, { imgurl: '../../img/fen-1.jpg', type1: '【老酒特賣】45℃老白汾十年陳釀500ML(2008-2009)', type2: '清香型', price: 100, num: 1 }, { imgurl: '../../img/fen-2.jpg', type1: '【老酒特賣】45℃老白汾十年陳釀500ML(2008-2009)', type2: '清香型', price: 100, num: 1 }, { imgurl: '../../img/fen-1.jpg', type1: '【老酒特賣】45℃老白汾十年陳釀500ML(2008-2009)', type2: '清香型', price: 100, num: 1 }, ], }, /** * 滑動切換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 }) } }, /*** 生命週期函數--監聽頁面加載*/ onLoad: function (options) { var that = this; /** * 獲取系統信息 */ wx.getSystemInfo({ success: function (res) { that.setData({ clientHeight: res.windowHeight }); } }); }, /*** 生命週期函數--監聽頁面顯示*/ onShow: function () { if (app.globalData.currentLocation == '') { this.setData({ currentTab: 0 }); } else { var i = app.globalData.currentLocation; this.setData({ currentTab: i }); } } }) 

所有訂單 wxss 代碼

.scroll-view_H{ white-space: nowrap; } .scroll-view-item_H{ display: inline-block; width: 20%; box-sizing: border-box; } .list-liu{ width: 100%; height: 85rpx; position: fixed; left: 0; top: 0; z-index: 1; background: #fff; border: 1rpx solid #eee; } .on{ color: #c80611; } .list-liu .swiper-tab-list{ text-align: center; line-height: 85rpx; font-size: 34rpx; } .kong{ width: 100%; height: 85rpx; } /*----------------------分割線------------------- */ /*購物車 所有訂單 個人收藏 瀏覽記錄 樣式 */ /* 列表 */ .list{width: 100%;background: #fff;margin-top:20rpx;display: flex;box-sizing: border-box;padding:10rpx 30rpx 10rpx 30rpx ;border-bottom: 1px solid #eee} .carts-radio{flex: 1;line-height: 180rpx;text-align: center}/* 選項框 */ .pic{flex: 3;height: 180rpx;} .pic image{width: 100%;height: 100%;} .con{flex: 6;padding-left: 20rpx;padding-bottom: 20rpx;box-sizing: border-box} view,text,block{ font-family: "Microsoft Yahei" } /* 類型描述 */ .type1{ padding-top: 10rpx; display: block; font-size: 30rpx; color: #323232; width:100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; } .type2{ display: flex; font-size: 28rpx; color: #666; width:100%; padding-top: 20rpx;box-sizing: border-box } /* 數量 */ .num{ width: 140rpx; height: 40rpx; border: 1px solid #eee; margin-top: 15rpx; background: #fff } .num2{ float: left; width: 56rpx; line-height: 40rpx; text-align: center; font-size: 28rpx; color: #666666 } .num1{float: left; width: 40rpx; height: 40rpx; line-height: 40rpx; text-align: center; font-size: 36rpx; padding: 0; color: #4a4949; border-right: 1px solid #eee; } .num3{ float: right; width: 40rpx; height: 40rpx; line-height: 40rpx; text-align: center; font-size: 36rpx; padding: 0; margin: 0; border-radius: 0px; color: #4a4949; border-left: 1px solid #eee; } /* 價格 */ .price{flex: 3;font-size: 30rpx;color: #c90211;box-sizing: border-box;position: relative} .price1{position: absolute;right: 0;top: 0} .number{position: absolute;right: 0;top: 40rpx} /* 刪除 */ .del{width: 50rpx;height: 50rpx;position: absolute;right: 0;bottom: 20rpx} /*----------------------分割線------------------- */ /**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } /*----------------------分割線------------------- */ /*首頁商品類樣式 */ .content{ display: flex; flex-wrap: wrap; } .content-1{ width: 375rpx; /* height: 420rpx; */ padding:20rpx 10rpx ; box-sizing: border-box; border-bottom: 2rpx solid #cccccc; border-right: 1rpx solid #cccccc; } .content-1 image{ width: 374rpx; height: 252rpx; margin-left: -8rpx; } .content-1 .price .text-price{ color: #b20000; font-size: 32rpx; font-weight: bold; } .content-1 .price .text-yj{ color: #656565; font-size: 24rpx; } .content-1 .price .text-oldprice{ text-decoration: line-through; color: #656565; font-size: 24rpx; } .content-1 .name .text-name{ font-size: 28rpx; color: #323232; } .content-1 .dress{ margin-top: 10rpx; } .content-1 .dress .dress-1{ float: left; color: #989898; font-size: 24rpx; } .content-1 .dress .dress-2{ float: right; color: #989898; font-size: 24rpx; margin-right: 20rpx; } 

下篇爲你們說明 爲什麼最後作交互的時候，並無使用該效果。