小程序swiper实现订单列表

最新推荐文章于 2024-08-21 17:47:57 发布

qq_夏阳

最新推荐文章于 2024-08-21 17:47:57 发布

阅读量3k

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_41806475/article/details/96429510

版权

这篇博客详细介绍了如何利用微信小程序的Swiper组件来实现订单列表的点击和滑动切换效果，包括WXML视图层、JS逻辑层和WXSS样式的设置方法。

摘要由CSDN通过智能技术生成

效果图

实现如图效果，点击切换，拖动切换的效果。。。

视图层WXML:

<view class="swiper-tab">
  <view wx:for="{
  {navTab}}" wx:key="{
  {index}}" class="swiper-tab-list {
  {currentTab==index ? 'on_pdd' : ''}}" data-current="{
  {index}}" bindtap="switchNav">{
  {item}}</view>
</view>
<view class="c_t60"></view> 

<swiper current="{
  {currentTab}}" class="swiper-box" duration="300" style="height:{
  {winHeight}}px" bindchange="bindChange">
  <swiper-item wx:for="{
  {navTab}}" wx:key="index">
    <scroll-view class="scrollWrap" scroll-y="true" style='height:{
  {winHeight}}px;'>
      <my-noData wx:if="{
  {orderList.length<1&&!loading}}" nodata="{
  {nodataType}}"></my-noData>
      <view class="orderList" wx:for="{
  {orderList}}" wx:key="index" data-item="{
  {item}}" bindtap='toDetail'>
        <view class="shop">
          <view class="shop_name">
            <image src='{
  {item.shopurl}}' mode='widthFix' lazy-load='true'></image>
            {
  {item.shop}}
          </view>
          <text class="state {
  {item.origin=='TaoBao' ? 'state_taobao' : item.origin=='PinDuoDuo' ?