小程序上下切换位置 小程序实现上下切换位置
JSN___不像码农的码农 人气:0想了解小程序实现上下切换位置的相关内容吗，JSN___不像码农的码农在本文为您仔细讲解小程序上下切换位置的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：小程序上下切换位置,小程序切换位置,小程序上下切换，下面大家一起来学习吧。
小程序上下切换位置
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 () {
}
})
以上仅供参考，方便大家学习！！
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
加载全部内容