本文实例为大家分享了小程序实现上下切换位置的具体代码,供大家参考,具体内容如下
小程序上下切换位置
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 () { } })
以上仅供参考,方便大家学习!!
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“小程序实现上下切换位置”评论...
更新动态
20240626
20240626
- 瑞鸣音乐《中国音乐地图之听见河南豫剧经典唱段》2020[WAV分轨]
- 【伊比萨沙发】VA-2024-IbizaSpring2024(LoungeCocktailsfromtheHeart)[FLAC]
- 群星《世界顶级汽车音响试音王》4K金碟16CD[WAV+CUE]
- 群星-音效环绕天碟《极致环绕人声天碟天品》7CD[WAV]
- 泰拉克SACD古典试音碟7SACD-ISO
- 群星《红歌宝典》20CD[WAV/分轨]
- 《101系列:好歌101首 细听年代精选》[WAV+CUE][3.6GB]
- 《101系列 6CD 国语经典101首歌曲 张学友 王菲代表作》[APE+CUE][2.8GB]
- 《101系列:国语经典101 VOL2 6CD 精选最经典101首》[WAV+CUE][2.3GB]
- 群星《十年网络红歌》15CD[WAV分轨]
- 宝丽金-环球10周年至50周年经典金曲15CD[低速原抓WAV+CUE]
- FIM唱片《十大男伶》[低速原抓WAV+CUE]
- 《101系列:情歌101 6CD》[WAV+CUE][3.1GB]
- 庄心妍《降调版合集》[320K/MP3][52.96MB]
- 庄心妍《降调版合集》[FLAC/分轨][118.78MB]