小程序實現(xiàn)上下移動切換位置
更新時間：2019年09月23日 11:28:58 作者：Bright2017
這篇文章主要為大家詳細介紹了小程序實現(xiàn)上下移動切換位置，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了小程序實現(xiàn)上下移動切換位置的具體代碼，供大家參考，具體內(nèi)容如下
<view wx:for="{{companyData}}" wx:key="{{item.id}}" class="overHiden">
<view class="floarLeft">{{item.name}}</view>
<view class="floarRight" wx:if="{{index != 0}}" data-index="{{index}}" bindtap="topClick">
<image src="../../images/32.png" class="rightmenuImg"></image>
</view>
<view class="floarRight" wx:if="{{index != companyData.length-1}}" data-index="{{index}}" bindtap="bottomClick">
<image src="../../images/33.png" class="rightmenuImg"></image>
</view>
</view>
data{
companyData:[
{
id:0,
name:'產(chǎn)品1'
},
{
id:1,
name:'產(chǎn)品2'
},
{
id:2,
name:'產(chǎn)品3'
},
{
id:3,
name:'產(chǎn)品4'
},
{
id:4,
name:'產(chǎn)品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
})
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了js調(diào)用網(wǎng)絡攝像頭的方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
BootStrap表單驗證 FormValidation 調(diào)整反饋圖標位置的實例代碼
這篇文章主要介紹了BootStrap表單驗證 FormValidation 調(diào)整反饋圖標位置的實例代碼,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了詳解 javascript對象創(chuàng)建模式的相關資料，幫助大家更好的理解和學習JavaScript的相關知識。感興趣的朋友可以了解下2020-10-10
JavaScript變量中var,let和const的區(qū)別
這篇文章主要介紹了JavaScript變量中var,let和const的區(qū)別,JavaScript中一共有3種用來聲明變量的關鍵字，分別是var、let和const,文章通過圍繞主題展開對三個關鍵詞的詳細介紹，需要的朋友可以參考一下2022-09-09
這篇文章主要介紹了微信小程序之分享頁面如何返回首頁的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
filter()創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素，這篇文章主要介紹了JavaScript數(shù)組filter方法,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了微信小程序select下拉框實現(xiàn)效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要給大家介紹了關于uni-app小程序分享功能實現(xiàn)方法的相關資料,uni-app中有分享的API接口,但是需要現(xiàn)在QQ或者微信等開發(fā)者平臺上注冊賬號,驗證公司信息,而且只能分享圖片或者文本等內(nèi)容,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了微信小程序激勵式視頻廣告組件使用，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
手寫new是JS面試題高頻考點，實現(xiàn)代碼也非常簡單，但在實現(xiàn)后小編對其為什么要這樣設計有著很深的疑惑，今天就來講一下為什么要這樣設計new的實現(xiàn)吧2023-05-05