知識(shí)
不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價(jià)值,我們?cè)谧非笃湟曈X表現(xiàn)的同時(shí),更側(cè)重于功能的便捷,營(yíng)銷的便利,運(yùn)營(yíng)的高效,讓網(wǎng)站成為營(yíng)銷工具,讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持!
您當(dāng)前位置>首頁(yè) » 新聞資訊 » 小程序相關(guān) >
微信小程序之scroll-view選項(xiàng)卡與跳轉(zhuǎn) (二)
發(fā)表時(shí)間:2021-4-12
發(fā)布人:葵宇科技
瀏覽次數(shù):77
本篇為大家介紹為何我們?cè)谧詈笞鼋换サ臅r(shí)候,并沒有使用上一篇講的選項(xiàng)卡的效果。
大家注意看,在我點(diǎn)擊跳轉(zhuǎn)后,首先能看到的是切換選項(xiàng)卡的一個(gè)運(yùn)動(dòng)過程,然后才給用戶展示出被跳轉(zhuǎn)的頁(yè)面,開始看起來挺炫酷的,但我們覺得這不是一個(gè)好的用戶體驗(yàn)。因?yàn)殡S著使用次數(shù)的增加,會(huì)讓用戶感覺到這個(gè)功能不能馬上展示出他想要的頁(yè)面,還會(huì)有一種審美疲勞的感覺。
同時(shí)大家也都知道,微信小程序大小只限定在2M以內(nèi),而這種寫法會(huì)增加不少的代碼量,所以盡量的精簡(jiǎn)代碼。
這大概也是大多數(shù)類似的小程序沒有該功能的原因吧?。儗俦救讼共拢?/p>
既然沒有了這個(gè)效果,那我們?nèi)绾螌?shí)現(xiàn)切換選項(xiàng)卡的功能呢?
思路:在“個(gè)人中心”點(diǎn)擊跳轉(zhuǎn)時(shí)需要傳遞一個(gè) id (index),然后在“全部訂單”頁(yè)面接收,用該 id (index)使被選中 tab 高亮,同時(shí)把用該 id(index)交互過來的數(shù)據(jù)渲染在頁(yè)面中。
在“全部訂單”頁(yè)面點(diǎn)擊 tab 切換頁(yè)面時(shí),同理使用該 tab 攜帶的 id (index)進(jìn)行交互,把交互過來的數(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é)束,感謝大家觀摩!
相關(guān)案例查看更多
相關(guān)閱讀
- 百度小程序開發(fā)
- 網(wǎng)站建設(shè)首選
- 云南網(wǎng)頁(yè)制作
- 海報(bào)插件
- 昆明軟件定制
- 云南科技公司
- 花農(nóng)小程序
- 網(wǎng)站建設(shè)需要多少錢
- 小程序開發(fā)
- 智慧農(nóng)貿(mào)市場(chǎng)
- 網(wǎng)絡(luò)公司電話
- 云南網(wǎng)站建設(shè)制作
- 汽車回收管理系統(tǒng)
- 小程序表單
- typescript
- 搜索引擎自然排名
- 云南小程序制作
- 霸屏推廣
- 云南小程序哪家好
- web開發(fā)技術(shù)
- 網(wǎng)站排名優(yōu)化
- php網(wǎng)站
- 貴州小程序開發(fā)
- 開通微信小程序被騙
- 云南網(wǎng)站開發(fā)
- 小程序被攻擊
- 網(wǎng)站制作哪家好
- 云南網(wǎng)站建設(shè)費(fèi)用
- 日歷組件
- 汽車回收系統(tǒng)