Small program to switch positions up and down
- 2021-09-20 19:26:41
- OfStack
This example for everyone to share the small program to achieve up and down switching position of the specific code, for your reference, the specific content is as follows
Applet switches position up and down
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">
Upper
</view>
<view class="floarRight" wx:if="{{index != companyData.length-1}}" data-index="{{index}}" bindtap="bottomClick">
Under
</view>
</view>
js:
// pages/yidong/yidong.js
Page({
/**
* Initial data of the page
*/
data: {
companyData:[
{
id:0,
name:' Products 1'
},
{
id:1,
name:' Products 2'
},
{
id:2,
name:' Products 3'
},
{
id:3,
name:' Products 4'
},
{
id:4,
name:' Products 5'
}
]
},
// Move the position upward
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
})
},
// Move the position down
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
})
},
/**
* Life cycle function -- Listen for page loading
*/
onLoad: function (options) {
},
/**
* Life cycle function -- Listen to the initial rendering of the page
*/
onReady: function () {
},
/**
* Life cycle function -- Monitor page display
*/
onShow: function () {
},
/**
* Life cycle function -- Monitor page hiding
*/
onHide: function () {
},
/**
* Life cycle function -- Monitor page uninstall
*/
onUnload: function () {
},
/**
* Page-related event handlers -- Listen for user drop-down actions
*/
onPullDownRefresh: function () {
},
/**
* Handler of pull-bottom event on page
*/
onReachBottom: function () {
},
/**
* Users click on the upper right corner to share
*/
onShareAppMessage: function () {
}
})
The above is for reference only, which is convenient for everyone to learn! !
I recommend a WeChat applet tutorial with high attention: "WeChat applet development tutorial". This site is carefully organized for everyone, and I hope I like it.