uni多选框的获取和删除值的方法、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>
</style>
为数组添加字段（两种方法）
需求：获取到了两个数组，需要取出一个数组中的对象，添加到另一个数组中。以便于在页面中遍历使用
add() {
//把webSocket获取到的放学状态添加到家长数据中
var that = this
//方法一双for
var leave = []
//遍历webSocket数据
that.studentInfo.forEach(function(item) {
// console.log('additem',item.leave_school_status)
that.leave = item.leave_school_status //将状态赋值
// console.log('that.leave', that.leave)
//遍历通过接口获取到的家长数据
for (var i = 0; i < that.Lists.length; i++) {
console.log('additem', item.id)
// console.log('that.leave', that.Lists[i].id)
if (item.id == that.Lists[i].id) {
//通过判断id是否相同
//id相同就把对应的状态加入进去
that.Lists[i]['leave_school_status'] = that.leave
// console.log('that.Lists[i]', that.Lists[i])
break
}
}
})
//方法二
var Info =[]
//遍历websocket传来的数据
that.studentInfo.forEach(function(item){
Info[(item.id).toString()] = item //将id赋值进去，和所有的内容赋值给新的数组
})
// that.Infos = Info
console.log('that.Info',Info)
//遍历获取到的家长数据
that.Lists.forEach(function(list){
//给获取到的家长数组，添加websocket传来的放学状态
list.leave_school_status = Info[list.id].leave_school_status
//添加websocket传来的排队数量
list.count_number =Info[list.id].count_number
console.log('list',list)
})
},
数字中间省略号过滤
方法一局部使用过滤器
方法二定义过滤方法
<p class="user-info-nickname">{
{
'18795389299' | ellipsis }}</p>
<p class="user-info-nickname">{
{
toHide('18795389299') }}</p>
//方法一
filters: {
ellipsis(value) {
let len = value.length;
return `${
value.substring(0, 3)}****${
value.substring(len - 2, len)}`
}
},
//方法二
toHide(array) {
var mphone = array.substring(0, 3) + '****' + array.substring(7);
return mphone;
},
设置动态:calss样式和动画
<view class="uni-swiper-tab " :class="{'animated fadeInRight':showAnimation===true}">
details() {
console.log('查看详情')
this.showAnimation = true
},