1, swiper: slide view container”
Weixin official document: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.hTML
1, page logic (index.js)”
Page({
data: {
imgUrls: [
{
link: '/pages/index/index',
url: '/images/001.jpg'
}, {
link: '/pages/list/list',
url: '/images/002.jpg'
}, {
link: '/pages/list/list',
url: '/images/003.jpg'
}
],
indicatorDots: true, //A small point
indicatorColor: "white",//Indication point color
activeColor: "coral",//Currently selected pointer color
autoplay: false, //Is it automatic?
interval: 3000, //Interval time
duration: 3000, //Slipping time
}
Page({ data: { imgUrls: [ { link: '/pages/index/index', url: '/images/001.jpg' }, { link: '/pages/list/list', url: '/images/002.jpg' }, { link: '/pages/list/list', url: '/images/003.jpg' } ], indicatorDots: true, //A small point indicatorColor: "white",//Indication point color activeColor: "coral",//Currently selected pointer color autoplay: false, //Is it automatic? interval: 3000, //Interval time duration: 3000, //Slipping time }
where imgUrls is the picture address and jump link we’re going to use in our rotation diagram
autoplay is automatically played.
duration sliding animation time
2, page structure (index.wxml)”
<!--Sowing map--> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}"
indicator-active-color="{{activeColor}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <navigator url="{{item.link}}" hover-class="navigator-hover"> <image src="{{item.url}}" class="slide-image" width="355" height="200" /> </navigator> </swiper-item> </block> </swiper>
Note: Swiper must not put any tags on the outside such as & lt; view & gt; and so on, if added, it may lead to rotation map can not come out.
3, page style (index.wxss)”
/*Sowing map*/ .slide-image { width: 100%; }
> practice quickly and you can see the effect picture as shown.