uni多选框的获取和删除值的方法
作者:互联网
uni多选框的获取和删除值的方法
<template>
<view class="page ">
<scroll-view class="scrollList" scroll-y :scroll-into-view="scrollViewId" :style="{height:winHeight + 'px'}">
<view class="uni-list">
<block v-for="(list, key) in lists" :key="key">
<block v-if="list.data.length">
<view class="uni-list-cell-divider" :id="list.letter">
{{list.letter}}
</view>
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list.data" :key="item"
:class="list.data.length -1 == index ? 'uni-list-cell-last' : ''">
<checkbox-group>
<view class="uni-list-cell-navigate ">
<view>
<checkbox :value="item" :checked="item.checked" @tap='checkboxs(item)' />
</view>
<view class="list-left">
{{item}}
</view>
<view class="list-left font-color">
{{gender}} {{studentID}}
</view>
<!-- <view class="uni-list-cell-navigate font-color" >
{{gender}} {{studentID}}
</view> -->
</view>
</checkbox-group>
</view>
</block>
</block>
</view>
</scroll-view>
<view class="uni-indexed-list-bar" :class="touchmove ? 'active' : ''" @touchstart="touchStart" @touchmove="touchMove"
@touchend="touchEnd" @touchcancel="touchCancel" :style="{height:winHeight + 'px'}">
<text v-for="(list,key) in lists" :key="key" class="uni-indexed-list-text" :class="touchmoveIndex == key ? 'active' : ''"
:style="{height:itemHeight + 'px',lineHeight:itemHeight + 'px'}">{{list.letter}}</text>
</view>
<view class="uni-indexed-list-alert" v-if="touchmove">
{{lists[touchmoveIndex].letter}}
</view>
<fab @tap='add'></fab>
</view>
</template>
<script>
import fab from '@/components/fab/fab.vue'
var airportDate = require("@/common/js/airport.js");
export default {
components: {
fab
},
data() {
return {
title: 'grid',
lists: airportDate.list,
touchmove: false,
touchmoveIndex: -1,
itemHeight: 0,
winHeight: 0,
scrollViewId: "A",
titleHeight: 0,
gender: '男',
studentID: '12015245066',
select_list_data: []
}
},
onLoad() {
let winHeight = uni.getSystemInfoSync().windowHeight;
this.itemHeight = winHeight / 26;
this.winHeight = winHeight;
// this.lists.forEach(item => {
// item.data.forEach(list => {
// // list.checked = false;
// console.log(list)
// })
// });
},
methods: {
add() {
var that = this
console.log(that.arr)
uni.navigateTo({
url: '/view/teacher/teacherReason'
});
},
//多选框获取值和删除值的方法
checkboxs(e) {
console.log('checkboxs e:', e)
var that = this
console.log('that.select_list_data:', that.select_list_data)
//添加 不重复的
Array.prototype.pushNoRepeat = function(){
for(var i=0; i<arguments.length; i++){
var ele = arguments[i];
if(this.indexOf(ele) == -1){
this.push(ele);
}
}
};
//自定义删除函数: 下标
Array.prototype.remove=function(dx)
{
if(isNaN(dx)||dx>this.length){return false;}
for(var i=0,n=0;i<this.length;i++)
{
if(this[i]!=this[dx])
{
this[n++]=this[i]
}
}
this.length-=1
};
if(that.select_list_data.length === 0){
that.select_list_data.pushNoRepeat(e);
return;
}
var select_list_data_temp = that.select_list_data;
select_list_data_temp.forEach(function(value, i) {
console.log("i", i);
console.log("value", value);
if (value === e) {
console.log("删除");
select_list_data_temp.remove(i);
}else{
select_list_data_temp.pushNoRepeat(e);
}
});
that.select_list_data = select_list_data_temp;
},
//==============uni内置方法=====================
touchStart(e) {
this.touchmove = true;
let pageY = e.touches[0].pageY;
let index = Math.floor((pageY - this.titleHeight) / this.itemHeight);
let item = this.lists[index];
if (item) {
this.scrollViewId = item.letter;
this.touchmoveIndex = index;
}
},
touchMove(e) {
let pageY = e.touches[0].pageY;
let index = Math.floor((pageY - this.titleHeight) / this.itemHeight);
let item = this.lists[index];
if (item) {
this.scrollViewId = item.letter;
this.touchmoveIndex = index;
}
},
touchEnd() {
this.touchmove = false;
this.touchmoveIndex = -1;
},
touchCancel() {
this.touchmove = false;
this.touchmoveIndex = -1;
}
}
}
</script>
<style>
.page {
display: flex;
flex-direction: row;
}
.scrollList {
flex: 1;
height: 100vh;
}
.uni-indexed-list-bar {
width: 46upx;
height: 100vh;
background-color: lightgrey;
display: flex;
flex-direction: column;
}
.uni-indexed-list-bar.active {
background-color: rgb(200, 200, 200);
}
.uni-indexed-list-text {
color: #aaa;
font-size: 22upx;
text-align: center;
}
.uni-indexed-list-bar.active .uni-indexed-list-text {
color: #333;
}
.uni-indexed-list-text.active,
.uni-indexed-list-bar.active .uni-indexed-list-text.active {
color: #007AFF;
}
.uni-indexed-list-alert {
position: absolute;
z-index: 20;
width: 160upx;
height: 160upx;
left: 50%;
top: 50%;
margin-left: -80upx;
margin-top: -80upx;
border-radius: 80upx;
text-align: center;
line-height: 160upx;
font-size: 70upx;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
.list-left {
width: 100%;
/* line-height:44upx; */
text-align: left;
}
</style>
标签:flex,删除,color,text,list,indexed,uni,选框 来源: https://blog.csdn.net/weixin_44745330/article/details/98031975