码迷,mamicode.com
首页 > 其他好文 > 详细

小程序轮播图

时间:2018-05-22 12:50:55      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:images   UNC   banner   cat   res   UI   使用   ctf   ready   

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
})
}
})
}
 
},
 
}
})
 技术分享图片

 

小程序轮播图

标签:images   UNC   banner   cat   res   UI   使用   ctf   ready   

原文地址:https://www.cnblogs.com/yaomengli/p/9070968.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!