微客导航 » 文章资讯 » 小程序实现上下切换位置

小程序实现上下切换位置

2023-07-11 18:03:04 153

本文实例为大家分享了小程序实现上下切换位置的具体代码，供大家参考，具体内容如下

小程序上下切换位置

wxml


{{item.name}}

上


下

js:

//pages/yidong/yidong.js
Page({

/**
*页面的初始数据
*/
data:{
companyData:[
{
id:0,
name:'产品1'
},
{
id:1,
name:'产品2'
},
{
id:2,
name:'产品3'
},
{
id:3,
name:'产品4'
},
{
id:4,
name:'产品5'
}
]
},

//位置向上移动
topClick:function(e){
varthat=this
varindex=e.currentTarget.dataset.index
varone=that.data.companyData[index]
vartwo=that.data.companyData[index-1]
varindex2=index-1
vardata1="companyData["+index+"]"
vardata2="companyData["+index2+"]"
that.setData({
[data1]:two,
[data2]:one
})
},
//位置向下移动
bottomClick:function(e){
varthat=this
varindex=e.currentTarget.dataset.index
varone=that.data.companyData[index]
vartwo=that.data.companyData[index+1]
varindex2=index+1
vardata1="companyData["+index+"]"
vardata2="companyData["+index2+"]"
that.setData({
[data1]:two,
[data2]:one
})
},

/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){

},

/**
*生命周期函数--监听页面初次渲染完成
*/
onReady:function(){

},

/**
*生命周期函数--监听页面显示
*/
onShow:function(){

},

/**
*生命周期函数--监听页面隐藏
*/
onHide:function(){

},

/**
*生命周期函数--监听页面卸载
*/
onUnload:function(){

},

/**
*页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function(){

},

/**
*页面上拉触底事件的处理函数
*/
onReachBottom:function(){

},

/**
*用户点击右上角分享
*/
onShareAppMessage:function(){

}
})

以上仅供参考，方便大家学习！！

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

小程序实现上下切换位置

热门推荐

随机推荐