Uniapp开发中做列表多选功能实现方式

作为一个程序员我们在项目开发过程中经常会遇到这样那样的功能,例如我们用uniapp开发小程序如何实现一个类似下面的功能,就是一个列表,让可以多选。

输入图片说明

当我们选中的时候出现一个选好了按钮并且列表里面灰色的箭头变色

输入图片说明

有了上面的目标需求我们就来简单的实现用uniapp开发小程序中实现这样的功能,仅仅的功能流程分享并不是完整的代码哦。如果需要可以联系我们的客服

代码汇总

//首先我们在我们对应列表循环数据的地方加上一个函数
<view class="unit-item bg-white" style="position:relative" v-for="(item, index) in tests" :key="index"  @click="select($event, index)">
//然后我们的方法如下
select(e, index) {
const i = this.currentArry.findIndex(item => item == index)                
if (i != -1) {    this.currentArry.splice(i, 1)
} else {                    this.currentArry.push(index)
}
},

整体就是定义一个变量来存储我们当前点击选中了那个然后通过currentArry.push()把我们选中的值动态的插入到变量里面,然后通过currentArry.includes(index)来判断当前循环的列表用的index编号是否包含在我们存储的变量里面就可以实现了。

<view class="select-jiaobiao" v-if="currentArry.includes(index)">
<image src="../../static/images/select.png" mode="" class="jiaobiao-img"></image>
</view>

<view class="select-jiaobiao" v-else>
<image src="../../static/images/unselect.png" mode="" class="jiaobiao-img"></image>
</view>

当然开发是需要有一定的基本技能的,需要您有一定的基础,去自行进行uniapp小程序开发实践的,并不是拿来就可以用,因为不同的程序员开发的思路和常见的命名是有区别的,所以我们多多敲敲代码去实践一下就行了。


希望对您有所帮助,不会的我们可以多多交流

0 条评论

还没有人发表评论

发表评论 取消回复

记住我的信息,方便下次评论
有人回复时邮件通知我