微信小程序的index.js怎么写？详细代码见下方↓

微信小程序实例index.js代码如下：

可以搜索小程序名称： 快芹羡递最后一公里

实例index.js代码

var app = getApp()

Page({

/**

* 页面的初始数据

*/

data: {

//三张图片轮播

imgUrls: [

{

imageUrl: '/images/weicha/timg1.jpg',

},

{

imageUrl: '/images/枣亩weicha/timg2.jpg',

},

{

imageUrl: '/images/weicha/timg3.jpg',

}

],

indicatorDots: false,

autoplay: false,

interval: 5000,

duration: 800,

},

onSwiperTab: function (e) {

/*var postId = e.target.dataset.postId

wx.navigateTo({

url: postId,

})*/

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

app.loginWinCha(this.initPageData)

},

//初始化登录才能查看的数据

initPageData: function () {

this.setData({

componentList: [

{

id: 1,

url: '../weicha/express/courier/index',

imageUrl: '/images/weicha/timg1_1.jpg',

title: '快递小哥(送快递)',

queryType: 'courier'

},

{

id: 2,

url: '../weicha/express/seller/index',

imageUrl: '/images/weicha/timg1_2.jpg',

title: '合作商家(代收快递)',

queryType: '凳首森seller'

},

{

id: 3,

url: '../weicha/express/personal/index',

imageUrl: '/images/weicha/timg1_3.jpg',

title: '收件人(签收快递)'

},

{

id: 4,

url: '../weicha/express/logistics/index',

imageUrl: '/images/weicha/timg1_4.jpg',

title: '快递物流查询'

}

]

})

},

onItemClick: function (e) {

var targetUrl = e.currentTarget.dataset.pay

var targetQueryType = e.currentTarget.dataset.index

if (targetQueryType == "seller") {

var reqData = {

seller_openId: app.globalData.openid,

status: '2'

}

this.queryDBUtil("sellerInfo", reqData, targetQueryType, targetUrl,

"亲，您暂未申请商家,请提交商家申请！")

} else if (targetQueryType == "courier") {

var reqData = {

courier_openId: app.globalData.openid,

status: '2'

}

this.queryDBUtil("courierInfo", reqData, targetQueryType, targetUrl,

"亲，您暂未申请快递员,请提交快递员申请！")

} else {

wx.navigateTo({

url: targetUrl

})

}

},

queryDBUtil: function (reqCollectionName, reqData,queryType, retUrl,retMgs){

wx.cloud.callFunction({

name: "utilsDB",

data: {

collectionName: reqCollectionName,

collectionWhere: reqData

},

complete: res =>{

let retStatus = '1'

if (res.result.data.length >= 1) {

retStatus = res.result.data[0].status

}

if (retStatus == '2') {

if (queryType == "seller"){

app.globalData.seller = res.result.data[0]

} else if (queryType == "courier"){

app.globalData.courier = res.result.data[0]

}

wx.navigateTo({

url: retUrl

})

} else {

wx.showToast({

icon: 'none',

title: retMgs

})

}

},

fail: err =>{

wx.showToast({

icon: 'none',

title: retMgs

})

}

})

}

})

新接了埋洞一个做微信小程序的活，编码方式跟vue很相似宽液燃，样式编写比普通css样式轻松的多，现要实现一个轮播图的效果。

请教了我的同学，她说小程序有两种方法能实现这个效果：

微信小程序—swiper组件文档

wxml文件：

js文件：

法慎虚一实现出来的效果图是酱紫的：

wxml文件：

js文件：

wxss文件：

用法二实现出来的效果图是酱紫的：

---