小程序基础swiper轮播图

其实swiper这个组件的用处还是相当大的，设置横向滚动可以制作成轮播图，横向文字滚动公告（不一定好看，可以试试，）纵向滚动也可以制作成上下文字公告。先来看看官方的提供文档是如何对swiper进行描述的吧。微信官方文档之swiper

例图：

代码：
wxml：

<!--轮播图-->
        <view class="background_box" style="margin-top:{{statusBarHeight+48}}px">
          <view class="swiper_div">
            <swiper 
              indicator-dots="{{indicatordots}}" 
              autoplay="{{autoplay}}"
              current="0"
              interval="{{intervall}}"
              circular="{{circular}}"
              vertical="{{vertical}}"
              duration="{{duration}}"
            >
            <!--展示轮播图效果-->
            <block wx:for='{{imgUrls}}'wx:key='index'>
              <swiper-item>
                <image src="{{item}}" class="slide-image" style="width:100%;height:100%;"></image>
              </swiper-item>
            </block>
            </swiper>
          </view>
         </view>

js：

data：[
 /**轮播图属性 */
    indicatordots: true,
    autoplay: true,
    intervall: 3000,
    circular: true,
    vertical: false,
    duration: 1000,

    imgUrls: [
      'https://hbimg.huabanimg.com/6481814eb6bc498e4c92bb79ecbb1baa725c4e381695d-4hkXTp_fw658',
      'https://hbimg.huabanimg.com/22120eedbdc32fbc21c02f6e54dd92edce52c98827e64-hnJ56P_fw658',
      'https://hbimg.huabanimg.com/3f9d623f46dee9d56c8c71b77a35e877f8d42e0721540-8sRKzp_fw658'
    ],
]

只要把文档里面的那几个属性看懂，然后加一个wx:for循环就行了。关于for循环的示例在上一个博文中有讲解。小程序基础wx:for循环