微信小程序之scroll-view选项卡与跳转 (二) - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序之scroll-view选项卡与跳转 (二)

发表时间:2021-4-12

发布人:葵宇科技

浏览次数:54

本篇为大家介绍为何我们在最后做交互的时候,并没有使用上一篇讲的选项卡的效果。

大家注意看,在我点击跳转后,首先能看到的是切换选项卡的一个运动过程,然后才给用户展示出被跳转的页面,开始看起来挺炫酷的,但我们觉得这不是一个好的用户体验。因为随着使用次数的增加,会让用户感觉到这个功能不能马上展示出他想要的页面,还会有一种审美疲劳的感觉。 
同时大家也都知道,微信小程序大小只限定在2M以内,而这种写法会增加不少的代码量,所以尽量的精简代码。 
这大概也是大多数类似的小程序没有该功能的原因吧!(纯属本人瞎猜)

既然没有了这个效果,那我们如何实现切换选项卡的功能呢? 
思路:在“个人中心”点击跳转时需要传递一个 id (index),然后在“全部订单”页面接收,用该 id (index)使被选中 tab 高亮,同时把用该 id(index)交互过来的数据渲染在页面中。 
在“全部订单”页面点击 tab 切换页面时,同理使用该 tab 携带的 id (index)进行交互,把交互过来的数据渲染在页面中。

wxml代码,是不是比上一篇的精简很多呢?

  1. scroll-x="true" bindscroll="scroll" class="scroll-view_H list-liu">
  2. class="scroll-view-item_H swiper-tab-list {{currentTab==0?'on':''}}" bindtap="swichNav" hover-class="eee" id="1">全部
  3. class="scroll-view-item_H swiper-tab-list {{currentTab==1?'on':''}}" bindtap="swichNav" hover-class="eee" id="2">待付款
  4. class="scroll-view-item_H swiper-tab-list {{currentTab==2?'on':''}}" bindtap="swichNav" hover-class="eee" id="3">待发货
  5. class="scroll-view-item_H swiper-tab-list {{currentTab==3?'on':''}}" bindtap="swichNav" hover-class="eee" id="4">已发货
  6. class="scroll-view-item_H swiper-tab-list {{currentTab==4?'on':''}}" bindtap="swichNav" hover-class="eee" id="5">已完成
  7. scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
  8. class="kong">
  9. class="list" wx:for="{{carts}}" wx:key="*this">
  10. class="pic">
  11. src="{{item.product_photo_path}}">
  12. url="../detail/detail" class="con" id="{{item.er[0].ordernoId}}" bindtap="navigatorToDetail">
  13. class="type1">{{item.product_name}}
  14. class="type2">{{item.product_content}}
  15. class="price">
  16. class="price1">¥{{item.product_price}}
  17. class="number">×{{item.product_count}}
  18. src="../../img/del.png" bindtap="deleteThis" id="{{item.er[0].ordernoId}}" >

本篇结束,感谢大家观摩!

相关案例查看更多