前言
微信小程序比我们上一章讲的搜索框更好实现,因为微信小程序公众平台提供了组件(很小声)。
组件链接
实现步骤
开始拷贝
结构实现
- 从swiper组件文档的最底部的wxml中复制swiper组件的相关代码。
- 从swiper组件文档的最底部的Javascript中复制data数据,放在index.js的data里面。
把index.js原有data里面的数据都给删掉。 - 把swiper-item里面的view改成image,目的是让每一个滑块展示出一张图片。
- swiper-item是定义在block wx:for这个语法里面,wx:for是引用的js里面data的数据,data里面对应的数组值有几个,那么就会生成几个swiper-item。
- wx:for引用的值改为imgUrls,这样是为了见名知意。
- 把imgUrls数组写成需要的图片路径。
- 在image文件引入对应的图片路径。
- 通过swiper相关属性来设置自动轮播、轮播间隔、轮播方向等。
index.js代码如下:
data: {
imgUrls: ['/images/xsdkq_index_lbt1.png', '/images/xsdkq_index_lbt2.png', '/images/xsdkq_index_lbt3.png','/images/xsdkq_index_lbt4.png'],
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 3500,
duration: 500,
activeColor:"#fff",
circular:true
},
index.wxml代码如下:
<!--轮播图的实现-->
<!--swiper组件是用来定义滑块视图容器,swiper-item是每一个滑块-->
<swiper indicator-dots="{{indicatorDots}}" indicator-active-color="{{activeColor}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<!--
block是一个辅助线组件,他不会有任何展示效果;
wx:for 用来定义for循环,wx:for="数组";
{{表达式}}wxml的插值表达式,从js的data里面引用值
{{background}},从js的data中获取background对应的值
在wxml页面中需要使用的数据,我们最好都定义在data中
-->
<block wx:for="{{imgUrls}}" wx:key="*this">
<swiper-item>
<!--swiper-item里面承载的是一张图片,不同的swiper-item承载着不同的图片-->
<image src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
样式实现
- 标注图对于轮播图区域高度的定义是160pt,为了实际开发所展示的效果更好,高度定义为200pt,给swiper设置高度。
- 给图片设置宽高。