小程序轮播图
Posted yaomengli
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序轮播图相关的知识，希望对你有一定的参考价值。
html部分
<view class="container">
<view class="swiper">
<swiper indicator-dots="{{indicatorDots}}
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for-items="{{banner_url}}" wx:key="item.id">
<swiper-item>
<block wx:if="{{item}}">
<image src="{{item}}" mode="aspectFill"/>
</block>
<!-- 图片不显示时显示得默认图片 -->
<block wx:else>
<image src="../../images/default_pic.png" mode="aspectFill"></image>
</block>
</swiper-item>
</block>
</swiper>
</view>
</view>
data.js部分
function getBannerData() {
// images路径以index.js相对于images文件夹得位置来写
var imgUrls = [
\'../../images/banner_01.png\', \'../../images/banner_02.png\', \'../../images/banner_03.png\', \'../../images/banner_04.png\'
]
return imgUrls
}
// 用module.exports把getBannerData()方法暴漏出来
module.exports.getBannerData = getBannerData
// 以json数据格式暴漏出来方便多个方法暴漏使用
module.exports = { getBannerData: getBannerData}
index.js部分
//index.js
//获取应用实例
const app = getApp()
// 把data.js引用过来使用
var fileData = require (\'../../utils/data.js\')
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse(\'button.open-type.getUserInfo\'),
banner_url: fileData.getBannerData(),
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 3000,
duration: 1000,
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: \'../logs/logs\'
})
},
onLoad: function () {
// console.log(fileData)
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
}
})
以上是关于小程序轮播图的主要内容，如果未能解决你的问题，请参考以下文章