微信小程序?qū)崿F(xiàn)列表項(xiàng)上移下移效果
更新時(shí)間：2022年07月07日 14:27:44 作者：asteriaV
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)列表項(xiàng)上移下移效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)列表項(xiàng)上移下移的具體代碼，供大家參考，具體內(nèi)容如下
需要實(shí)現(xiàn)的效果：點(diǎn)擊向下按鈕時(shí)所選項(xiàng)內(nèi)容和下一項(xiàng)內(nèi)容交換，向上按鈕則相反，刪除按鈕則點(diǎn)擊時(shí)刪除所選項(xiàng)那一列內(nèi)容
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]
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
非常好用的JsonToString 方法 簡(jiǎn)單實(shí)例
這篇文章介紹了非常好用的JsonToString簡(jiǎn)單實(shí)例，有需要的朋友可以參考一下2013-07-07
所有瀏覽器都支持該功能IE瀏覽器不能低于IE10.整個(gè)CORS通信過程都是瀏覽器自動(dòng)完成不需要用戶參與。對(duì)于開發(fā)者來說CORS通信與同源的AJAX通信沒有差別代碼完全一樣瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源就會(huì)自動(dòng)添加一些附加的頭信息有時(shí)還會(huì)多出一次附加的請(qǐng)求，但用戶不會(huì)有感覺。2016-04-04
JS彈出可拖拽可關(guān)閉的div層完整實(shí)例
這篇文章主要介紹了JS彈出可拖拽可關(guān)閉的div層完整實(shí)現(xiàn)方法,包括對(duì)div彈出層的樣式及功能的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了VsCode插件整理（小結(jié)），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了js實(shí)現(xiàn)跨域訪問的三種方法，包括基于iframe實(shí)現(xiàn)跨域、基于script標(biāo)簽實(shí)現(xiàn)跨域以及后臺(tái)代理方式 ，感興趣的小伙伴們可以參考一下2015-12-12
JS判斷字符串長(zhǎng)度的5個(gè)方法（區(qū)分中文和英文）
這篇文章主要介紹了JS判斷字符串長(zhǎng)度的5個(gè)方法,并且區(qū)分中文和英文,需要的朋友可以參考下2014-03-03
Js自動(dòng)截取字符串長(zhǎng)度,添加省略號(hào)(……)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫s自動(dòng)截取字符串長(zhǎng)度,添加省略號(hào)(……)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
JS?中的類Public,Private?和?Protected詳解
這篇文章主要介紹了JS中的類Public,Private和Protected詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
javascript內(nèi)嵌式與外鏈?zhǔn)降幕緫?yīng)用方式
這篇文章主要介紹了javascript內(nèi)嵌式與外鏈?zhǔn)降幕緫?yīng)用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-12-12