NO--19 微信小程序之scroll-view選項卡與跳轉（二）

本篇爲你們介紹爲什麼咱們在最後作交互的時候，並無使用上一篇講的選項卡的效果。

 

scroll-view與跳轉.gif

（如沒法查看圖片，還請翻看上一篇！）

你們注意看，在我點擊跳轉後，首先能看到的是切換選項卡的一個運動過程，而後纔給用戶展現出被跳轉的頁面，開始看起來挺炫酷的，但咱們以爲這不是一個好的用戶體驗。由於隨着使用次數的增長，會讓用戶感受到這個功能不能立刻展現出他想要的頁面，還會有一種審美疲勞的感受。
同時你們也都知道，微信小程序大小隻限定在2M之內，而這種寫法會增長很多的代碼量，因此儘可能的精簡代碼。
這大概也是大多數相似的小程序沒有該功能的緣由吧！（純屬本人瞎猜）

既然沒有了這個效果，那咱們如何實現切換選項卡的功能呢？
思路：在「我的中心」點擊跳轉時須要傳遞一個 id （index），而後在「所有訂單」頁面接收，用該 id （index）使被選中 tab 高亮，同時把用該 id（index）交互過來的數據渲染在頁面中。
在「所有訂單」頁面點擊 tab 切換頁面時，同理使用該 tab 攜帶的 id （index）進行交互，把交互過來的數據渲染在頁面中。

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':''}}" bindtap="swichNav" hover-class="eee" id="1">所有</view> <view class="scroll-view-item_H swiper-tab-list {{currentTab==1?'on':''}}" bindtap="swichNav" hover-class="eee" id="2">待付款</view> <view class="scroll-view-item_H swiper-tab-list {{currentTab==2?'on':''}}" bindtap="swichNav" hover-class="eee" id="3">待發貨</view> <view class="scroll-view-item_H swiper-tab-list {{currentTab==3?'on':''}}" bindtap="swichNav" hover-class="eee" id="4">已發貨</view> <view class="scroll-view-item_H swiper-tab-list {{currentTab==4?'on':''}}" bindtap="swichNav" hover-class="eee" id="5">已完成</view> </scroll-view> <!-- 選項卡內容 --> <!-- 所有訂單 內容 --> <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.product_photo_path}}"></image> </view> <!-- 類型表述 --> <navigator url="../detail/detail" class="con" id="{{item.er[0].ordernoId}}" bindtap="navigatorToDetail"> <!-- <view> --> <text class="type1">{{item.product_name}}</text> <text class="type2">{{item.product_content}}</text> <!-- </view> --> </navigator> <!-- 價格 --> <view class="price"> <text class="price1">￥{{item.product_price}}</text> <text class="number">×{{item.product_count}}</text> <image src="../../img/del.png" bindtap="deleteThis" id="{{item.er[0].ordernoId}}" ></image> </view> </view> </scroll-view>