小程序页面布局集合，订单管理页

本文主要是介绍小程序页面布局集合，订单管理页，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

订单管理，效果如下，上面的nav，两边的内容随点击也一起滚动

wxml

<scroll-view scroll-x class="nav" scroll-left="{{scrollLeft}}" scroll-with-animation>
  <view class="bigNavEach">
    <view class="navEach" wx:for="{{navList}}" wx:key="index">
      <view class="navName" bindtap="navChange" data-index="{{index}}">{{item.name}}</view>
      <view class="navBot {{item.istrue?'navActive':''}}"></view>
    </view>
  </view>
</scroll-view>

<swiper class="bigswiper"	current="{{nowCurrent}}" bindchange="swiperChange">
  <swiper-item wx:for="{{navList}}" wx:key="index">
    <view style="width: 100%;height: 100%;background: skyblue;">{{item.name}}</view>
  </swiper-item>
</swiper>

js

data: {
    navList:[
        {name:'待确定',istrue:true},
        {name:'待付款',istrue:false},
        {name:'待提车',istrue:false},
        {name:'待过户',istrue:false},
        {name:'已完成',istrue:false},
        {name:'竞拍记录',istrue:false},
    ],//头部导航
    nowNavIndex:0,//导航当前激活的下标
    scrollLeft:0,//头部横向滚动位置

    nowCurrent:0,//swiper当前所在滑块
},

onLoad(options) {
    //点击外面哪个进来就跳转到第几个
    let index = parseInt(options.index);
    this.navMove(index);
},
//导航切换
navChange(e){
    let index = e.currentTarget.dataset.index;//新
    this.navMove(index);
},
//导航动
navMove(e){
    let index = e;
    let oldIndex = this.data.nowNavIndex;//旧
    let aa = 'navList['+oldIndex+'].istrue';
    let bb = 'navList['+index+'].istrue';
    this.setData({
        [aa]:false,
        [bb]:true,
        nowCurrent:index
    })
    this.data.nowNavIndex = index;
    //当点击右边几个的时候就往有移动50
    //如果nav里的文字过多可以调整scrollLeft的值
    if(index >= 3 && this.data.scrollLeft <= 0){
        this.setData({
            scrollLeft:50
        })
    }
    //当点击左边几个的时候就往左移动到最左侧
    if(index <= 2 && this.data.scrollLeft > 0){
        this.setData({
            scrollLeft:0
        })
    }
},

//滑动swiper切换
swiperChange(e){
    this.navMove(e.detail.current);
},

wxss

.nav{
    height: 100rpx;
    width: 100%;
    overflow: hidden;
}
.bigNavEach{
    white-space:nowrap;
}
.navEach{
    display: inline-block;
    height: 100%;
    padding: 0 20rpx;
    font-size: 34rpx;
    color: #333;
}
.navName{
    height: 94rpx;
    line-height: 94rpx;
}
.navBot{
    height: 6rpx;
    width: 80%;
    margin-left: 10%;
    background-color: #fff;
}
.navActive{
    background-color: #e73737;
}

.bigswiper{
    position: absolute;
    left: 0;
    top: 100rpx;
    width: 100%;
    height: calc(100% - 100rpx);
}

这篇关于小程序页面布局集合，订单管理页的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！