小程序 菜单栏点击切换页面 页面可左右滑动_可滑动页面

小程序 菜单栏点击切换页面 页面可左右滑动

— html

<!--首页-->
<view class="homePage">
  <!-- 导航栏 -->
  <view class="container">
    <!-- tab导航栏 -->
    <!-- scroll-left属性可以控制滚动条位置 -->
    <!-- scroll-with-animation滚动添加动画过渡 -->
    <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
      <block wx:for="{{navData}}" wx:for-index="idx" wx:key="*this">
        <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
          <view class="name">{{item.HotName}}</view>
          <view class="lin"></view>
        </view>
      </block>
    </scroll-view>
    <!-- 页面内容 -->
    <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
      <swiper-item wx:for="{{navData}}" wx:for-index="idx" wx:key="idx" class="tab-content">
        <view class="ul" wx:if="{{currentTab==idx}}">
            <view class="li">
              {{productList[idx].HotName}}
            </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

— js

// pages/detail/detail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    flag: false,
    navData: [
      {
      HotName: '饮食'
      },
      {
        HotName: '健康'
      },
      {
        HotName: '个护'
      },
      {
        HotName: '居家'
      },
      {
        HotName: '清洁'
      },
      {
        HotName: '美妆'
      },
      {
        HotName: '护肤'
      }

    ],// 商品分类列表
    currentTab: 0,
    navScrollLeft: 0,
    productList: [
      {
        HotName: '饮食页面'
      },
      {
        HotName: '健康页面'
      },
      {
        HotName: '个护页面'
      },
      {
        HotName: '居家页面'
      },
      {
        HotName: '清洁页面'
      },
      {
        HotName: '美妆页面'
      },
      {
        HotName: '护肤页面'
      }
    ],// 热销商品列表
    addnum: 1
  },
  setTab: function (e) {
    const edata = e.currentTarget.dataset;
    this.setData({
      showtab: edata.tabindex,

    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (e) {
    // 获取系统信息
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          pixelRatio: res.pixelRatio,
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      },
    })
  },
  // 导航栏点击项居中
  switchNav(event) {

    // 下标
    var cur = event.currentTarget.dataset.current;
    //每个tab选项宽度占1/5          手机宽度/5
    var singleNavWidth = this.data.windowWidth / 5;
    //tab选项居中                            
    this.setData({
      navScrollLeft: (cur - 2) * singleNavWidth
    })
    if (this.data.currentTab == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur,
        flag: false,
        // productList: []
      })
    }
  },
  // 滑动页面切换
  switchTab(event) {
    var cur = event.detail.current;
    var singleNavWidth = this.data.windowWidth / 5;
    this.setData({
      currentTab: cur,
      navScrollLeft: (cur - 2) * singleNavWidth
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

—css

/* pages/home/home.wxss */
page {
  width: 100%;
  height: 100%;
}
.homePage {
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
  background-color: #eee;
}
.nav {
    height: 80rpx;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: #f7f7f7;
    font-size: 16px;
    white-space: nowrap;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}

.nav-item {
    width: 20%;
    display: inline-block;
    text-align: center;
}
.nav-item .name {
    width: 100%;
    font-size: 24rpx;
    line-height: 76rpx;
    flex: 1;
  }
  .nav-item .lin {
    width: 64rpx;
    border: 4rpx solid rgba(255, 255, 255, 0);
    border-radius: 2rpx;
    margin: auto;
  }
.nav-item.active{
    color: red;
}
.nav-item.active .lin {
    margin: auto;
    border: 4rpx solid #EB5902;
    border-radius: 2rpx;
    background-color: #EB5902;
    width: 64rpx;
  }
.tab-box {
  padding-top: 80rpx;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.tab-content {
  overflow-y: scroll;
}
.s_swiper {
  width: 100%;
  height: 250rpx;
}
.s_swiper navigator {
  width: 100%;
  height: 100%;
}
.s_swiper navigator image {
  width: 100%;
  height: 100%;
}
.classlist {
  width: 710rpx;
  border-radius: 20rpx;
  margin: 0 auto;
  margin-top: 20rpx;
}
.classlist .title {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-bottom: 1rpx solid #eee;
}
.classlist .c_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.c_content navigator {
  box-sizing: border-box;
  width: 50%;
  border-bottom: 2rpx solid #eee;
}
.c_content navigator:nth-child(odd) {
  border-right: 2rpx solid #eee;
}
.c_content navigator image {
  display: block;
  width: 100%;
}
.ul {
  width: 710rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  margin-bottom: 100rpx;
  /*height:1030rpx;*/
  overflow: hidden;
  overflow-y: scroll;
  border-radius: 14rpx;
}
.ul .li {
  position: relative;
  display: flex;
  align-items: center;
  height: 170rpx;
  padding: 30rpx 0;
  padding-left: 28rpx;
  padding-right: 16rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

样式如图