微信小程序点击页面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 = thiswx.getSystemInfo({success: function (res) {that.setData({deviceW: res.windowWidth,deviceH: res.windowHeight})}})},/*** @Explain：选项卡点击切换*/tabSwitch: function (e) {console.log('值',e)var that = thisif (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 = thisswitch (this.data.currtab) {case 0:that.waitPayShow()breakcase 1:that.alreadyShow()breakcase 2:that.lostShow()breakcase 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" }],})},
})

微信小程序点击页面tab栏切换相关推荐

微信小程序丝滑的tab栏
目录前言一.快速开始二.实战 1.在index.js 2.在index.wxcss 3.在 index.wxml 3.效果前言产品拿着某个app的页面来找到我说:"做一个和她这一样 ...
微信小程序之创建顶部tab菜单栏切换（新手学习）
关于顶部菜单tab菜单栏切换,可以有两种写法,但是都是用到swiper这个视图插件.插件介绍可以查看微信小程序开放文档. 第一种方式: 效果图 .wxml <view>tap切换方法一& ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...
微信小程序点击切换tab跟随动画
微信小程序点击切换tab跟随动画 <view class='tabbox'><view wx:for="{{title}}" class='tab {{curr ...
微信小程序点击按钮分享指定页面
微信小程序点击按钮分享指定页面 1.在wxml里写所要点击的按钮 <button data-info='{{order}}' open-type="share" hover- ...
微信小程序开发--分类页面实现
微信小程序开发–分类页面实现之前在详情页面利用Vant Weapp的UI库构建出了GoodsAction 商品导航功能,接着需要在分类页面(kind.wxml)实现商品分类. 1.引入第三方组件用 ...
微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏固定导航栏可滑动导航栏顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...
微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...

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

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

微信小程序点击页面tab栏切换相关推荐

最新文章

热门文章