|
本篇為大家介紹為何我們?cè)谧詈笞鼋换サ臅r(shí)候，并沒(méi)有使用上一篇講的選項(xiàng)卡的效果。
大家注意看，在我點(diǎn)擊跳轉(zhuǎn)后，首先能看到的是切換選項(xiàng)卡的一個(gè)運(yùn)動(dòng)過(guò)程，然后才給用戶展示出被跳轉(zhuǎn)的頁(yè)面，開(kāi)始看起來(lái)挺炫酷的，但我們覺(jué)得這不是一個(gè)好的用戶體驗(yàn)。因?yàn)殡S著使用次數(shù)的增加，會(huì)讓用戶感覺(jué)到這個(gè)功能不能馬上展示出他想要的頁(yè)面，還會(huì)有一種審美疲勞的感覺(jué)。
同時(shí)大家也都知道，微信小程序大小只限定在2M以內(nèi)，而這種寫(xiě)法會(huì)增加不少的代碼量，所以盡量的精簡(jiǎn)代碼。
這大概也是大多數(shù)類似的小程序沒(méi)有該功能的原因吧?。儗俦救讼共拢?/p>
既然沒(méi)有了這個(gè)效果，那我們?nèi)绾螌?shí)現(xiàn)切換選項(xiàng)卡的功能呢？
思路：在“個(gè)人中心”點(diǎn)擊跳轉(zhuǎn)時(shí)需要傳遞一個(gè) id （index），然后在“全部訂單”頁(yè)面接收，用該 id （index）使被選中 tab 高亮，同時(shí)把用該 id（index）交互過(guò)來(lái)的數(shù)據(jù)渲染在頁(yè)面中。
在“全部訂單”頁(yè)面點(diǎn)擊 tab 切換頁(yè)面時(shí)，同理使用該 tab 攜帶的 id （index）進(jìn)行交互，把交互過(guò)來(lái)的數(shù)據(jù)渲染在頁(yè)面中。
wxml代碼，是不是比上一篇的精簡(jiǎn)很多呢？
-
-
-
scroll-x="true" bindscroll="scroll" class="scroll-view_H list-liu">
-
class="scroll-view-item_H swiper-tab-list {{currentTab==0?'on':''}}" bindtap="swichNav" hover-class="eee" id="1">全部
-
class="scroll-view-item_H swiper-tab-list {{currentTab==1?'on':''}}" bindtap="swichNav" hover-class="eee" id="2">待付款
-
class="scroll-view-item_H swiper-tab-list {{currentTab==2?'on':''}}" bindtap="swichNav" hover-class="eee" id="3">待發(fā)貨
-
class="scroll-view-item_H swiper-tab-list {{currentTab==3?'on':''}}" bindtap="swichNav" hover-class="eee" id="4">已發(fā)貨
-
class="scroll-view-item_H swiper-tab-list {{currentTab==4?'on':''}}" bindtap="swichNav" hover-class="eee" id="5">已完成
-
-
-
-
-
scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
-
class="kong">
-
-
class="list" wx:for="{{carts}}" wx:key="*this">
-
-
class="pic">
-
src="{{item.product_photo_path}}">
-
-
-
url="../detail/detail" class="con" id="{{item.er[0].ordernoId}}" bindtap="navigatorToDetail">
-
-
class="type1">{{item.product_name}}
-
class="type2">{{item.product_content}}
-
-
-
-
class="price">
-
class="price1">￥{{item.product_price}}
-
class="number">×{{item.product_count}}
-
src="../../img/del.png" bindtap="deleteThis" id="{{item.er[0].ordernoId}}" >
-
-
-
本篇結(jié)束，感謝大家觀摩！
|
