小程序分列导航栏

发表于 | 分类于
字数统计: 474 | 阅读时长 ≈ 2

需求:导航栏页面可左右滑动，可点击跳转页面。

效果图

1.wxml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<view>
  <swiper class="categoryList" indicator-dots="true" 
  indicator-color="rgba(228,228,228,1)" 
  indicator-active-color="#FECA49">
  <block wx:for="{{categoryList}}" wx:key="item">
  <swiper-item>
  <block wx:for="{{item}}" wx:key="item">
    <view class="category-info">
      <navigator url="{{item.url}}" open-type="navigate" hover-class="other-navigator-hover">
        <image src="{{item.src}}" 
        class="category-image"></image>
        <view class="category-text">{{item.name}}</view>
      </navigator>
    </view>
  </block>
  </swiper-item>
  </block>
  </swiper>
</view>

2.wxss:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.categoryList{
  width: 100%;
  height: 350rpx;
  border-bottom:20rpx solid #f4f4f4; 
}
.category-info{
  display: inline-block;
  text-align: center;
  position: relative;
  margin-top: 20rpx;
  height: 150rpx;
  width: 25%;
}
.category-image{
  width: 95rpx;
  height: 95rpx;
}
.category-text{
  font-size: 25rpx;
  width: 100%;
  line-height: 30rpx
}

3.js:

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
Page({
  data: {
    categoryList: {
      pageone: [{
        name: "服务",
        src: "/pages/images/pet.png",
        url: "/pages/home/home"
      }, {
        name: "机票",
        src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "船票",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "门票",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "车票",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "景点",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "ktv",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "美食",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }],
      pagetwo: [{
        name: "酒店",
        src: "/pages/images/pet.png",
        url: "/pages/home/home"
      }, {
        name: "奶茶",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "租车",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "电影",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "药店",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "买花",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "外卖",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "送水",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }]
    }
  }
})