新建一个page,然后默认有.js .json .wxml .wxss四个文件。首先先在wxml文件中定义控件
<!--pages/thirdPage/detail.wxml--> <view class="page__bd"> <view class="section section_gap swiper"> <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image"/> </swiper-item> </block> </swiper> </view> <view class="text_info"> <text> 我是一篇文章\n</text> </view> </view>
定义了一个swiper,然后设置indicator、自动播放、间隔等属性。
在wxss文件中,我理解的是用来修饰和布局这些控件的,
.text_info{ margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 20px; }
和android类似,定义距离左右上下边距。
然后在js文件中引入需要的数据和实现的方法
data: { imgUrls: [ '/images/first.jpg', '/images/second.jpg', '/images/third.jpg', '/images/sixth.jpg', '/images/fourth.jpg', '/images/fifth.jpg', ], background: ['green', 'red', 'yellow'], indicatorDots: true, vertical: false, autoplay: true, interval: 3000, duration: 1200 },
其中,imgUrls是图片的数据源,本地图片。。。
顺便说一下本地图片添加方式,与其他编译器不同的是,微信小程序需要打开项目目录,在目录中定义一个文件夹,然后拷贝图片到 这个目录下,然后项目中就有图片了。
其中/images/first.jpg 是图片的路径
最终实现效果图