轮播图带链接
基本每个项目都有轮播图，带各种不同的链接，是时候总结一波封装成组件了
使用视觉容器swiper和swiper-item的组合来完成轮播效果
以下是用到的swiper的属性
indicator-dots 显示指示点
autoplay 自动播放
interval 播放时间间隔
duration 滑动动画时长
circular 衔接滑动
1.在component中创建文件夹banner以及四个对应的文件
2.在banner.wxml写入
<view class='swiperBanner'>
<swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' interval='{{interval}}' duration='{{duration}}' circular='{{circular}}'>
<swiper-item wx:for="{{imgUrls}}" wx:key='{{index}}'>
<view data-url='{{item.link}}' data-type="{{type}}" data-appid="{{item.appid}}" bindtap="goUrl">
<image src="{{item.url}}" class="slide-image" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
</view>
3.在banner.wxss写入
.swiperBanner {
width: 100vw;
height: 420rpx !important;
margin: 0 auto;
border: 1rpx solid red;
}
.swiperBanner image {
width: 100%;
height: 420rpx !important;
}
swiper {
width: 100%;
height: 420rpx !important;
}
4.在banner.js写入
Component({
/**
* 组件的属性列表
*/
properties: {
imgUrls: {
type: Array,
value: []
}
},
/**
* 组件的初始数据
*/
data: {
indicatorDots: false,
autoplay: true,
interval: 3000,
duration: 800,
circular: true,
// 轮播图
imgUrls: [],
},
/**
* 组件的方法列表
*/
methods: {
goUrl(e) {
let that = this;
let type = e.currentTarget.dataset.type;
let appid = e.currentTarget.dataset.appid;
let url = e.currentTarget.dataset.url;
if (type == 1) {
// 跳转tabbar页
wx.switchTab({
url: url,
})
} else if (type == 2) {
// 跳转内部页
wx.navigateTo({
url: url,
})
} else if (type == 3) {
//跳转小程序
wx.navigateToMiniProgram({
appId: appid,
path: url,//打开的路径
extraData: {
foo: 'bar'
},
envVersion: 'develop', //develop -开发版 trial -体验版 release -正式版
success(res) {
// 打开成功
}
})
} else if(type==4){
//跳转外部链接
wx.navigateTo({
url: '/pages/webview/webview?url='+url, //创建的页面带有web-view标签
}) }
}
}
})
以上是组件的内容
在引用的页面json写上
{
"usingComponents": {
"banner":"../../Component/banner/banner"
}
}
在引用的页面wxml写上
<banner imgUrls="{{imgUrls}}"></banner>
在引用的页面js给imgUrls赋值
imgUrls: [{
type: 1,
appid: "",
link: '../activity/washCar1/index/index',
url: '/images/tabBar/a1.png',
},
{
type: 2,
appid: "",
link: '../activity/Odysseus/index/index',
url: '/images/tabBar/a1.png',
},
],
这个就是最基础的轮播各种跳转，轮播样式可以自定义调整
