多端小程序的轮播图插件(简单好用)

妖狐艹你老母 2021-09-30 00:06 335阅读 0赞

采用 vue的 方式写的 所以和原生稍有不同

![20190719192123524.png][]

### template ###

<template>
    	<view>
    		<swiper class="banner" :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="true" :interval="interval"
    		 :duration="duration">
    			<block v-for="(item,index) in bannerList" :key="index">
    				<swiper-item>
    					<view @click='getIndex(index)' hover-class="none">
    						<image :src="item.img" mode="widthFix" class="banner-img" />
    					</view>
    				</swiper-item>
    			</block>
    		</swiper>
    	</view>
    </template>
    <script>
    	export default {
    		data() {
    			return {
    				indicatorDots: false, //  是否显示面板指示点
    				autoplay: true, // 是否自动切换
    				circular: true, // 是否采用衔接滑动
    				current: 0, // 当前所在页面的 index
    				interval: 5000, // 自动切换时间间隔
    				duration: 1000, // 滑动动画时长
    				bannerList: [{
    					img: 'http://image.qipinke.com/banner/banner180912.png',
    					navType: 'navigateTo',
    					jumpPath: '{ "url": "/pages/family/flow/flow" }',
    				}, {
    					img: 'http://image.qipinke.com/banner/banner_shs_20181030.png',
    					navType: 'navigateToMiniProgram',
    					navObj: '{ "appId": "2017082808428283","path": "pages/home/home" }',
    				}, {
    					img: 'http://image.qipinke.com/banner/banner180920.png',
    					navType: 'navigateToMiniProgram',
    					navObj: '{ "appId": "2018122562686742","path": "pages/index/index?originAppId=2017090608580011&newUserTemplate=20190104000000101476" }',
    				}],
    			}
    		},
    	
    		methods: {
    
    			//轮播图跳转
    			swiperNav(e) {
    				const index = e.currentTarget.dataset.index;
    				const bannerList = this.data.bannerList;
    				const navType = bannerList[index].navType || 'navigateTo';
    				const navObj = JSON.parse(bannerList[index].jumpPath);
    				app.doLogin({
    					success() {
    						my[navType](navObj)
    					}
    				})
    			},
    
    
    		}
    
    	}
    </script>

常用的参数：

![20190719192146989.png][]

### 想知道更多swiper滑块参数使用的更多内容： ###

[https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html][https_developers.weixin.qq.com_miniprogram_dev_component_swiper.html] ：注（微信原生）

[20190719192123524.png]: /images/20210923/134710f002534c809f6be052ed64ac06.png
[20190719192146989.png]: /images/20210923/d805ab6e2f4a40e7ade4720383ab30c0.png
[https_developers.weixin.qq.com_miniprogram_dev_component_swiper.html]: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html