其实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循环