wxss
/* miniprogram/pages/myorder/myorder.wxss */
/* 中间菜单 */
page {
height: 100%;
width: 100%;
}
.tab {
display: flex;
flex-direction: column;
}
.tab-nav {
height: 80rpx;
background: #fff;
border-bottom: 0.5rpx dotted #ddd;
display: flex;
line-height: 79rpx;
position: relative;
}
.tab-line {
position: absolute;
left: 0;
bottom: -1rpx;
height: 4rpx;
background: #5dec69;
transition: all 0.3s;
}
.tab-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
.foodName {
font-size: 20px;
margin-bottom: 20px;
}
.price {
flex: 1;
color: red;
line-height: 20px;
}
.foodName {
font-size: 20px;
margin-bottom: 10px;
}
.foodinfo {
padding: 20px;
}
/* 中间插件结束 */wxml
<scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;" scroll-left="{{showtab>2?windowWidth*0.2*(showtab):0}}">
<!-- tab -->
<view class="tab">
<view class="tab-nav" style='font-size:12px'>
<view wx:for="{{tabnav.tabitem}}" wx:key="unique" bindtap="setTab" data-tabindex="{{index}}" style="min-width:20%;max-width:20%;text-align:center;height: 80rpx;{{index>4?'border-bottom: 1rpx dotted #ddd;':''}};{{item.id==showtab?'color:#5DEC69':''}}">{{item.text}}</view>
<view>
<view class="tab-line" style="width:{{100/tabnav.tabnum}}%;transform:translateX({{100*showtab}}%);"></view>
</view>
</view>
</view>
</scroll-view>
<view style='height:{{hostinfo.height-34}}px;width:{{hostinfo.width}}px;'>
<swiper bindchange="switerChange" current="{{showtab}}">
<swiper-item item-id="0">0</swiper-item>
<swiper-item item-id="1">1</swiper-item>
<swiper-item item-id="2">2</swiper-item>
<swiper-item item-id="3">3</swiper-item>
<swiper-item item-id="4">4</swiper-item>
</swiper>
</view>js
// miniprogram/pages/myorder/myorder.js
const app=getApp();
Page({
/**
* 页面的初始数据
*/
data: {
showtab: 0, //顶部选项卡索引
tabnav: {
tabnum: 5,
tabitem: [
{
"id": 0,
"text": "全部"
},
{
"id": 1,
"text": "代付款"
},
{
"id": 2,
"text": "代发货"
},
{
"id": 3,
"text": "待收货"
}, {
"id": 4,
"text": "已收货"
}
],
},
productList:[],
hostinfo: {},//屏幕宽度信息
pageinfo: { 'newstate': '' }
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//获取屏幕信息
this.getViewWidthAndHeight();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
// 中间菜单的事件开始
setTab: function (e) {
const edata = e.currentTarget.dataset;
var pageinfo = this.data.pageinfo;
if (edata.tabindex == 0) {
pageinfo.newstate = 'info';
} else {
pageinfo.newstate = 'canshu';
}
this.setData({
showtab: edata.tabindex,
})
},
qihuan: function (e) {
console.log(e);
var index = e.detail.current;
var jia = { 'currentTarget': { 'dataset': { 'tabindex': index } } };
this.setTab(jia);
},
//将功能居中
center: function (index) {
},
// 获取品目的宽和高
getWidthHeight: function () {
wx.getSystemInfo({
success: (res) => {
this.setData({
windowHeight: res.windowHeight,
windowWidth: res.windowWidth,
widthX3: res.windowWidth * 0.3
});
}
});
},
// 中间的事件结束
//获取屏幕的款和高
getViewWidthAndHeight: function () {
var hostinfo = app.hostinfo;
this.setData({
hostinfo: hostinfo
})
},
switerChange:function(e){
console.log(e)
var index = e.detail.current;
var jia = { 'currentTarget': { 'dataset': { 'tabindex': index } } };
this.setTab(jia);
}
})