微信小程序實現(xiàn)列表項上移下移效果
更新時間：2022年07月07日 14:27:44 作者：asteriaV
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)列表項上移下移效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)列表項上移下移的具體代碼，供大家參考，具體內容如下
需要實現(xiàn)的效果：點擊向下按鈕時所選項內容和下一項內容交換，向上按鈕則相反，刪除按鈕則點擊時刪除所選項那一列內容
index.wxml
<view class="subject" wx:for="{{sublist}}" wx:key="index">
?? ?<view>{{index+1}}.{{item}}</view>
?? ?<view class="btns">
?? ??? ?<view class="btn up" wx:if="{{index>0}}" data-i="{{index}}" bindtap="up">??</view>
?? ??? ?<view class="btn down" wx:if="{{index<sublist.length-1}}" data-i="{{index}}" bindtap="down">??</view>
?? ??? ?<view class="btn del" data-i="{{index}}" bindtap="del">X</view>
?? ?</view>
</view>index.wxss
.subject{
? display: flex;
? justify-content: space-between;
? align-items: center;
? padding: 0 40rpx;
}
.btns{
? margin: 20rpx 20rpx;
}
.btn{
? width: 60rpx;
? height: 60rpx;
? border: 1px solid #ccc;
? border-radius: 50%;
?align-items: center;
?justify-content: center;
?text-align: center;
?color: #fff;
?line-height: 60rpx;
?margin: 10rpx 0;
}
?
?.up{
? background: rgba(255, 182, 47, 0.842);
}
?.down{
? background: skyblue;
}
.del{
? background: #eee;
}index.js
import {$attr} from '../../utils/index' ;//引入utils/index.js 封裝的方法
Page({
?
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? sublist:[
? ? ? 'AAAAAAAAAAAA',
? ? ? 'BBBBBBBBBBBBBB',
? ? ? 'CCCCCCCCCCCCC',
? ? ? 'DDDDDDDDDDD'
? ? ]
? },
? del(e){
? ? let i=$attr(e,'i')
? ? this.data.sublist.splice(i,1)
? ? this.setData({
? ? ? sublist:this.data.sublist
? ? })
? },
? up(e){
? ? let i=$attr(e,'i')
? ? let temp=this.data.sublist[i]
? ? this.data.sublist[i]=this.data.sublist[i-1]
? ? this.data.sublist[i-1]=temp
? ? this.setData({
? ? ? sublist:this.data.sublist
? ? })
? },
? down(e){
? ? let i=$attr(e,'i')
? ? let temp=this.data.sublist[i]
? ? this.data.sublist[i]=this.data.sublist[i+1]
? ? this.data.sublist[i+1]=temp
? ? this.setData({
? ? ? sublist:this.data.sublist
? ? })
? },
?
})utils/index.js
export function $attr(e, key) {
? return e.currentTarget.dataset[key]
}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章介紹了非常好用的JsonToString簡單實例，有需要的朋友可以參考一下2013-07-07
所有瀏覽器都支持該功能IE瀏覽器不能低于IE10.整個CORS通信過程都是瀏覽器自動完成不需要用戶參與。對于開發(fā)者來說CORS通信與同源的AJAX通信沒有差別代碼完全一樣瀏覽器一旦發(fā)現(xiàn)AJAX請求跨源就會自動添加一些附加的頭信息有時還會多出一次附加的請求，但用戶不會有感覺。2016-04-04
這篇文章主要介紹了JS彈出可拖拽可關閉的div層完整實現(xiàn)方法,包括對div彈出層的樣式及功能的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單留言板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了VsCode插件整理（小結），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了js實現(xiàn)跨域訪問的三種方法，包括基于iframe實現(xiàn)跨域、基于script標簽實現(xiàn)跨域以及后臺代理方式 ，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了JS判斷字符串長度的5個方法,并且區(qū)分中文和英文,需要的朋友可以參考下2014-03-03
Js自動截取字符串長度,添加省略號(……)的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫s自動截取字符串長度,添加省略號(……)的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
JS?中的類Public,Private?和?Protected詳解
這篇文章主要介紹了JS中的類Public,Private和Protected詳解，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了javascript內嵌式與外鏈式的基本應用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-12-12