小程序实现上下切换位置
(编辑:jimmy 日期: 2024/12/23 浏览:3 次 )
本文实例为大家分享了小程序实现上下切换位置的具体代码,供大家参考,具体内容如下
小程序上下切换位置
wxml
<view wx:for="{{companyData}}" wx:key="index" class="overHiden"> <view class="floarLeft">{{item.name}}</view> <view class="floarRight" wx:if="{{index != 0}}" data-index="{{index}}" bindtap="topClick"> 上 </view> <view class="floarRight" wx:if="{{index != companyData.length-1}}" data-index="{{index}}" bindtap="bottomClick"> 下 </view> </view>
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) { var that = this var index = e.currentTarget.dataset.index var one = that.data.companyData[index] var two = that.data.companyData[index - 1] var index2 = index - 1 var data1 = "companyData[" + index + "]" var data2 = "companyData[" + index2 + "]" that.setData({ [data1]: two, [data2]: one }) }, // 位置向下移动 bottomClick: function(e) { var that = this var index = e.currentTarget.dataset.index var one = that.data.companyData[index] var two = that.data.companyData[index + 1] var index2 = index + 1 var data1 = "companyData[" + index + "]" var data2 = "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 () { } })
以上仅供参考,方便大家学习!!
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:小程序实现点击tab切换左右滑动