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.


Related articles: