uni 다중 선택 상자의 값을 가져오고 삭제하는 방법, uni 기술 창고
45097 단어 필기
<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)
})
},
디지털 중간 생략 필터
방법 국부 사용 필터 방법 2 정의 필터 방법
<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
},
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
leetcode 퀴즈 투어(1)이것은 문제 풀이 여행의 첫 번째 편으로 귀속에 대한 총결로 제목은 주로 체인 테이블과 두 갈래 나무를 포함한다.이전에 귀환을 고려할 때 귀환의 한 걸음 한 걸음 조작을 고려했기 때문에 세부 사항을 모두 똑똑히 알아...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
