微信小程序-swiper的使用（干货拿来即用！）_微信小程序swiper-item如何放独立页面

---

好久没更新博客了，今天遇到一个坑，坑了一下午，准备把它记录下来，以便别人也能快速的解决问题。学校项目需要小程序开发，最近把小程序看了，把官方开发指南过了一遍，看了一个黑马的小程序视频，其实我大部分都是看的黑马的视频，黑马有的视频是不错的，去年寒假的时候看了node，那位讲师是真不错啊，后续我追着看了他的讲的Vue，讲的特别细，很耐心。有想看的，下方留言。

---

开始入坑 Swiper

先上效果图

当初想着找一个UI框架组件实现它，找了好几个都没有。心凉凉，那么只能自己来了。

Swiper 格式

<swiper  style="width:200rpx ,height:900rpx" class="contaner" indicator-dots>
    <swiper-item class="" item-id=""  >
          <image class="" src="" />
          <text class="" >
          </text>   
        </view>
    </swiper-item>
</swiper>

1
2
3
4
5
6
7
8
9

实现上面效果

JS 数据

 data: {
    dormList: [
      // 第一个swiper-item
      [{
          id: "第一个",
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 2,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 3,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 4,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
                {
          id: 2,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 3,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 4,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        }
      ],
      // 第二个swiper-item
      [{
        id: "第二个",
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 1,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 1,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 1,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        }
      ]
    ],
  }
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

View 层

<swiper  style="width:200rpx ,height:900rpx" class="contaner" indicator-dots>
  <block wx:for="{{dormList}}" wx:for-index="dormIndex" wx:for-item="swiperItem" wx:key="dormIndex">
    <swiper-item class="" item-id=""  >
      <block wx:for="{{swiperItem}}" wx:for-index="NumIndex" wx:for-item="NumList" wx:key="NumIndex">
        <view class="" hover-class="none" hover-stop-propagation="false">
          <image class="" src="{{NumList.image}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""/>
          <text class="" selectable="false" space="false" decode="false">
            {{NumList.id}}
          </text>   
        </view>
      </block>
    </swiper-item>83
  </block>
</swiper>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

接着咋大白话

• Swiper 是一个滑块视图容器，它很多属性就不在着列了。
• swiper-item 是Swiper 的滑块，如果加入滑动内容，那么就在swiper-item中添加
• 想实现滑动显示多页效果，那么就需要定义多维数组，如果想实现单页滑动的话，那么就定义一维数组，但是需要注意的是，如果swiper-item中内容过多时，就会超出Swiper容器的大小，部分内容就会隐藏，数据多时建议定义为二维数组。
• 一个滑块显示多少内容根据你定义的多维数组中某个数组的数据多少显示，通过简单的布局就可实现一页显示多个内容

Swiper 容器包裹swiper-item
<swiper  style="width:200rpx ,height:900rpx" class="contaner" indicator-dots>
然后这可以控制显示多少块  swiper-item ， 一般这个部位都会通过block标签来遍历，它不会占用页面位置
    <swiper-item class="" item-id=""  >
    这显示一个swiper-item要显示的内容
          <image class="" src="" />
          <text class="" >
          </text>   
        </view>
    </swiper-item>
</swiper>
1
2
3
4
5
6
7
8
9
10
11

通过这个坑总结：

• 不管学哪个组件或者新东西，先弄懂其中的关系之间的联系，不要一上手就敲代码，那样只会浪费时间。
• 知道之间的关系，然后大量例子来构建知识，知识构建例子，例子构建知识，之前看知乎一个小编说的，感觉很深奥。