微信小程序点击页面tab栏切换

最新推荐文章于 2023-09-21 21:23:13 发布

烂泥也能扶上墙

最新推荐文章于 2023-09-21 21:23:13 发布

阅读量587

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/qsj0606/article/details/112373428

版权

此代码示例展示了如何在微信小程序中使用Swiper组件和WXML、WXSS、JS来实现页面底部Tab栏切换，并根据用户选择显示不同状态的订单详情，包括待付款、待发货、待收货和售后订单。每个订单项包含商品名称、状态、下单时间和总价等信息。

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

微信小程序点击页面tab栏切换

在这里插入图片描述

wxml

<view class="container">
  <view class="swiper-tab">
    <block wx:for="{{swipertab}}" wx:key="sptab">
      <view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" data-current="{{item.index}}"
        bindtap="tabSwitch">{{item.name}}</view>
    </block>
  </view>
  <swiper current="{{currtab}}" class="swiper-box" duration="300" style="height:{{deviceH-31}}px"
    bindchange="tabChange">
    <!-- 待付款 -->
    <swiper-item>
      <scroll-view class="hot-box" scroll-y="true">
        <view class="orderDetails" wx:for="{{waitPayOrder}}" wx:key="index">
          <view class="orderListTitle">
            <text class="userName">{{item.name}}</text>
            <text class="orderStatus">{{item.state}}</text>
          </view>
          <view class="orderListDetails">
            <view class="productImg">
              <image src="{{item.url}}" background-size="cover"></image>
            </view>
            <view class="productInfo">
              <view class="productTitle">下单时间: {{item.time}}</view>
              <text class="productPrice">当前状态：{{item.status}}</text>
            </view>
          </view>
          <view class="productCount">
            <view>
              <text>合计：￥{{item.money}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </swiper-item>
    <!-- 待发货 -->
    <swiper-item>
      <scroll-view class="hot-box" scroll-y="true">
        <view class="orderDetails" wx:for="{{alreadyOrder}}" wx:key="index">
          <view class="orderListTitle">
            <text class="userName">{{item.name}}</text>
            <text class="orderStatus">{{item.state}}</text>
          </view>
          <view class="orderListDetails">
            <view class="productImg">
              <image src="{{item.url}}" background-size="cover"></image>
            </view>
            <view class="productInfo">
              <view class="productTitle">下单时间: {{item.time}}</view>
              <text class="productPrice">当前状态：{{item.status}}</text>
            </view>
          </view>
          <view class="productCount">
            <view>
              <text>合计：￥{{item.money}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </swiper-item>
    <!-- 待收货 -->
    <swiper-item>
      <scroll-view class="hot-box" scroll-y="true">
        <view class="orderDetails" wx:for="{{lostOrder}}" wx:key="index">
          <view class="orderListTitle">
            <text class="userName">{{item.name}}</text>
            <text class="orderStatus">{{item.state}}</text>
          </view>
          <view class="orderListDetails">
            <view class="productImg">
              <image src="{{item.url}}" background-size="cover"></image>
            </view>
            <view class="productInfo">
              <view class="productTitle">下单时间: {{item.time}}</view>
              <text class="productPrice">当前状态：{{item.status}}</text>
            </view>
          </view>
          <view class="productCount">
            <view>
              <text>合计：￥{{item.money}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </swiper-item>
    <!-- 售后订单 -->
    <swiper-item>
      <scroll-view class="hot-box" scroll-y="true">
        <view class="orderDetails" wx:for="{{endOrder}}" wx:key="index">
          <view class="orderListTitle">
            <text class="userName">{{item.name}}</text>
            <text class="orderStatus">{{item.state}}</text>
          </view>
          <view class="orderListDetails">
            <view class="productImg">
              <image src="{{item.url}}" background-size="cover"></image>
            </view>
            <view class="productInfo">
              <view class="productTitle">下单时间: {{item.time}}</view>
              <text class="productPrice">当前状态：{{item.status}}</text>
            </view>
          </view>
          <view class="productCount">
            <view>
              <text>合计：￥{{item.money}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

** wxss**

.swiper-tab {
  height: 80rpx;
  line-height: 80rpx;
  background: #ffffff;
  columns: #999999;
  display: flex;
  position: relative;
  z-index: 2;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-bottom: 2rpx solid #e6e6e6;
}

.swiper-tab-list {
  padding: 0 8rpx;
  font-size: 30rpx;
}

.on {
  border-bottom: 8rpx solid #ff9908;
  color: #ff9908
}

.navTopList {
  display: flex;
  width: 100%;
  height: 70rpx;
  background: #fff;
  border-bottom: 1rpx solid #e6e6e6;
  margin-top: 10rpx;
}

.navTopList .order-info {
  text-align: center;
}

.navTopList .order-info view {
  width: 56rpx;
  height: 56rpx;
  margin-left: 31rpx;
}

.navTopList .order-info text {
  font-size: 34rpx;
}

.navTopList .order-info text.active {
  color: #ff6662;
}

.navTopList .ywc,
.navTopList .dfk,
.navTopList .yqx {
  flex: 1;
}

/*订单列表*/
.orderDetails {
  background: #fff;
  border-bottom: 20rpx solid #f5f5f5;
}

.orderListTitle {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #BEBEBE;
}

.orderListTitle .userName {
  padding-right: 50rpx;
  margin-left: 10px;
}

.orderListTitle .orderStatus {
  float: right;
  margin-right: 20rpx;
  color: #2f7b27;
  font-size: 34rpx;
}

.orderListDetails {
  display: flex;
  height: 200rpx;
  border-bottom: 1rpx solid #f3f3f3;
}

.orderListDetails .productImg {
  flex: 1;
  height: 180rpx;
  width: 120px;
  margin-top: 20rpx;
  margin-left: 20rpx;
}

.orderListDetails .productImg image {
  width: 100px;
  height: 90%;
}

.orderListDetails .productInfo {
  flex: 4;
  margin: 40rpx 10px 20px 30rpx;
  font-size: 15px;

}

.orderListDetails .productInfo .productTitle {
  font-size: 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
}

.productCount {
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #f3f3f3;
}

.productCount>view {
  float: right;
  margin-right: 30rpx;
}

** js**

Page({
 
  /**
  * 页面的初始数据
  */
  data: {
    currtab: 0,
    swipertab: [
      { 
        name: '待付款', 
        index: 0 
      }, 
      { 
        name: '待发货', 
        index: 1 
      }, 
      { 
        name: '待收货', 
        index: 2 
      },
      { 
        name: '售后订单', 
        index: 3 
      }
    ],
    goods_arr:[
      {
        name:'夏桑菊',
        specs:'10袋',
        company:'广州白云山制药有限公司',
        price:'6.20',
        total:'12.40'
      },
      {
        name:'夏桑菊',
        specs:'10袋',
        company:'广州白云山制药有限公司',
        price:'6.20',
        total:'12.40'
      }
    ],
    order_status:false,
  },
  onLoad: function (options) {
    console.log('传值',options.id,this)
    const that=this;
    if(options.id!=0){
      that.setData({
        currtab: options.id
      })
    }
  },
  /**
  * 生命周期函数--监听页面初次渲染完成
  */
  onReady: function () {
    // 页面渲染完成
    this.getDeviceInfo()
    this.orderShow()
  },
   
  getDeviceInfo: function () {
    let that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          deviceW: res.windowWidth,
          deviceH: res.windowHeight
        })
      }
    })
  },
   
  /**
  * @Explain：选项卡点击切换
  */
  tabSwitch: function (e) {
    console.log('值',e)
    var that = this
    if (this.data.currtab === e.target.dataset.current) {
      return false
    } else {
      that.setData({
        currtab: e.target.dataset.current
      })
    }
  },
   
  tabChange: function (e) {
    console.log('数值',e)
    this.setData({ currtab: e.detail.current })
    this.orderShow()
  },
   
  orderShow: function () {
    let that = this
    switch (this.data.currtab) {
      case 0:
        that.waitPayShow()
        break
      case 1:
        that.alreadyShow()
        break
      case 2:
        that.lostShow()
        break
      case 3:
        that.endShow()
        break
    }
  },
   
  waitPayShow:function(){
    this.setData({
      waitPayOrder: [
        { name: "清热消炎宁胶囊", state: "待付款", time: "2018-10-14 14:00-16:00", status: "待付款", url: "/public/orther_img/produce_bg.png", money: "186" }
      ],
    })
  },

  alreadyShow: function(){
    this.setData({
      alreadyOrder: [
        { name: "清热消炎宁胶囊", state: "待发货", time: "2018-09-30 14:00-16:00", status: "待发货", url: "/public/orther_img/produce_bg.png", money: "132" }, 
        { name: "清热消炎宁胶囊", state: "待发货", time: "2018-10-12 18:00-20:00", status: "待发货", url: "/public/orther_img/produce_bg.png", money: "205" }
      ]
    })
  },
   
  lostShow: function () {
    this.setData({
      lostOrder: [
        { name: "清热消炎宁胶囊", state: "待收货", time: "2018-10-4 10:00-12:00", status: "待收货", url: "/public/orther_img/produce_bg.png", money: "122" }
      ],
    })
  },

  endShow: function () {
    this.setData({
      endOrder: [
        { name: "清热消炎宁胶囊", state: "售后订单", time: "2018-10-4 10:00-12:00", status: "退款成功", url: "/public/orther_img/produce_bg.png", money: "122" }
      ],
    })
  },
})

烂泥也能扶上墙

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
4
评论
微信小程序点击页面tab栏切换

微信小程序点击页面tab栏切换wxml<view class="container"> <view class="swiper-tab"> <block wx:for="{{swipertab}}" wx:key="sptab"> <view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" data-current="{{item.index}}"
复制链接

扫一扫