小程序swiper实现订单列表

这篇博客详细介绍了如何利用微信小程序的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' ? 
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值