实现如图效果，点击切换，拖动切换的效果。。。
视图层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' ? 'state_pdd' : item.origin=='JDCOM' ? 'state_jd' : ''}}">{{item.orderstate}}</text> </view> <view class="proInfo"> <image class="proInfo_img" src='{{item.pictureurl==""?defaultImg:item.pictureurl}}' mode='widthFix' lazy-load='true' binderror="errorFn" data-errorimg="{{index}}"></image> <view class="proInfo_right"> <view class="proInfo_text"> <view class="proInfo_text_title"> <text wx:if="{{item.origin==='TaoBao'}}" class="iconfont icon-tianmaot"></text> <text wx:elif="{{item.origin==='PinDuoDuo'}}" class="iconfont icon-pin"></text> <text wx:elif="{{item.origin==='JDCOM'}}" class="iconfont icon-JD"></text> {{item.couponname}} </view> <text class="iconfont icon-qianjinjiantou"></text> </view> <view class="proInfo_text"> <view class="proInfo_text_dtt">{{item.orderdtt}}</view> <text class="proInfo_text_acount">×{{item.productcount}}</text> </view> </view> </view> <view class="orderNum"> <view>订单号:{{item.ordernum}}({{item.type}})</view> <view>实付:<text>￥{{item.payamount}}</text></view> </view> </view> <view class="no-more" wx:if="{{isNoMoreData}}">------------ 已经到底了 ------------</view> </scroll-view> </swiper-item> </swiper> //my-noData my-order是自己写的组件，在json文件里面引入使用即可； //winHeight 通过获取设备高度，动态赋值，swiper需要一个高度属性逻辑层js：
Page({ data: { nodataType: 7, orderList: [], //订单列表数据，接口获取 currentPage: 1, isNoMoreData: false, orderState: null, winHeight: 900, currentTab: 0, //当前显示tab的下标 navTab: ['全部', '待结算', '已结算', '退款'], loading:true, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.initData(1); //获取数据的方法 }, initData(currentPage) { //写你自己的接口 }, switchNav(e) { //点击 这个方法会触发bindChange()方法 let isSelect = e.target.dataset.current; this.setData({ currentTab: isSelect, }) }, bindChange(e) { //切换swiper let isSelect = e.detail.current; if (isSelect != 0) { this.setData({ orderState: isSelect }) } else { this.setData({ orderState: null }) } this.setData({ isNoMoreData: false, loading: true, currentTab: isSelect, orderList: [] }) this.initData(1) }, toDetail(val){ console.log(val.detail) let obj = JSON.stringify(val.detail); wx.navigateTo({ url: '../orderDetail/orderDetail?item=' + encodeURIComponent(obj) }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { //获取设备高度 let _this = this; wx.getSystemInfo({ success: function (res) { // console.log(res.windowWidth); // console.log(res.windowHeight); _this.setData({ winHeight: res.windowHeight }) }, }) }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { //上拉加载分页 this.setData({ loading:true }) if (!this.data.isNoMoreData&&this.data.orderList.length>0) { this.initData(++this.data.currentPage); } }, })wxss
.swiper-tab{ width: 100%; border-top: 2rpx solid #eee; border-bottom: 2rpx solid #eee; text-align: center; line-height: 88rpx; background: #fff; position: fixed; top: 0; z-index: 999; } .swiper-tab-list{ font-size:32rpx; display: inline-block; width: 25%; color: #333; /* font-weight: bold; */ } .on_taobao{ position: relative; color: #FF4B0A; } .on_taobao::after{ position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); width:120rpx; height:6rpx; content: ''; background:linear-gradient(98deg,rgba(252,111,3,1),rgba(255,143,3,1),rgba(253,93,17,1)); border-radius:3rpx; } .on_jd{ position: relative; color: #D32835; } .on_jd::after{ position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); width:120rpx; height:6rpx; content: ''; background:linear-gradient(265deg,rgba(238,82,94,1),rgba(211,40,53,1)); border-radius:3rpx; } .on_pdd{ position: relative; color: #E22E1F; } .on_pdd::after{ position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); width:120rpx; height:6rpx; content: ''; background:linear-gradient(262deg,rgba(255,94,81,0.88),rgba(226,46,31,0.88)); border-radius:3rpx; } .swiper-box{ display: block; height: 100%; width: 100%; margin-top: 90rpx; overflow: hidden; background-color: #F8F8F8; } page{ background-color: #F2F2F2; } .orderList{ width: 710rpx; height: 313rpx; border-radius:16rpx; background-color: #fff; margin:20rpx auto 0; padding: 30rpx 24rpx 0 24rpx; box-sizing: border-box; } .shop,.proInfo,.orderNum{ display: flex; justify-content: space-between; } .shop_name{ font-size: 26rpx; color: #333; } .shop_name image{ width: 32rpx; height: 32rpx; margin-right: 15rpx; position: relative; top: 8rpx; /* margin-top: 15rpx; */ } .shop .state{ font-size: 26rpx; } .shop .state_taobao{ color: #FF4B0A; } .shop .state_pdd{ color: #E22E1F; } .shop .state_jd{ color: #D32835; } .proInfo{ padding: 30rpx 0; box-sizing: border-box; } .proInfo_img{ width:110rpx; height:110rpx; border-radius:10rpx; overflow: hidden; /* background-color: pink; */ } .proInfo_right{ width: 522rpx; padding-top: 12rpx; box-sizing: border-box; } .proInfo_text{ display: flex; justify-content: space-between; justify-items: middle; } .proInfo_text_title{ font-size: 28rpx; color: #000; line-height: 45rpx; white-space: nowrap; max-width: 480rpx; text-overflow: ellipsis; overflow: hidden; margin-bottom: 10rpx; } .proInfo_text_title .iconfont{ font-size: 30rpx; } .icon-qianjinjiantou{ font-size: 25rpx; color: #000; font-weight: bold; } .proInfo_text_dtt{ font-size: 24rpx; color: #999; } .proInfo_text_acount{ font-size: 26rpx; color: #999; } .proInfo_text_acount text{ font-size: 32rpx; color: #000; } .orderNum{ font-size: 24rpx; color: #333; line-height: 82rpx; border-top: 2rpx solid #eee; white-space: nowrap; } .orderNum text{ position: relative; font-size: 32rpx; color: #000; }
