微信小程序?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]
}以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于原生js實(shí)現(xiàn)九宮格算法代碼實(shí)例
這篇文章主要介紹了基于原生js實(shí)現(xiàn)九宮格算法代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
JavaScrip數(shù)組刪除特定元素的幾種方法總結(jié)
從js數(shù)組中刪除指定元素是我們每個(gè)人都遇到的問題，網(wǎng)上這方面的資料也很多，但有的時(shí)間過于久遠(yuǎn)，有的內(nèi)容不夠全面，所以自己來整理下，這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScrip數(shù)組刪除特定元素的多種方法，需要的朋友可以參考下。2017-09-09
這篇文章主要為大家詳細(xì)介紹了Bootstrap表格使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
可以移除數(shù)組中的值函數(shù) ，用來取出數(shù)組中的一些值，間接的修改了數(shù)組值。2009-07-07
這篇文章主要介紹了JS實(shí)現(xiàn)在線ps功能詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
css 屬性zoom是ie私有屬性 在FF中（或者說僅實(shí)現(xiàn)CSS標(biāo)準(zhǔn)的其他瀏覽器中）無法使用，一直在網(wǎng)上搜索它的替代方案，但沒有收獲，后來聽群里有朋友說em或可解決此問題，經(jīng)過研究和測(cè)試，發(fā)現(xiàn)果然可以解決。2008-08-08
JavaScript實(shí)現(xiàn)可動(dòng)的canvas環(huán)形進(jìn)度條
這篇文章主要介紹了如何利用JavaScript canvas繪制一個(gè)可以動(dòng)的環(huán)形進(jìn)度條。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手試一試2022-02-02
關(guān)于include標(biāo)簽導(dǎo)致js路徑找不到的問題分析及解決
本文為大家詳細(xì)介紹下關(guān)于使用jsp:include標(biāo)簽及<%@ include標(biāo)簽時(shí)要注意的事項(xiàng)以及實(shí)測(cè)發(fā)現(xiàn)問題并解決問題的全過程，感興趣的各位可以參考下哈，希望對(duì)大家有所幫助2013-07-07
javascript伸縮型菜單實(shí)現(xiàn)代碼
這是一款真正的JavaScript伸展收縮型菜單，鼠標(biāo)放上看一看，是不是很酷？鼠標(biāo)劃出菜單項(xiàng)的時(shí)候，背景會(huì)伸長。菜單沒有加鏈接，想用的自己加，再美化一下，絕對(duì)夠個(gè)性吧。2015-11-11
基于JavaScript實(shí)現(xiàn)單選框下拉菜單添加文件效果
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)單選框下拉菜單添加文件效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06