【uni-app、vue】scroll滑动、二级分类任性多选

<template><view><view class="uni-padding-wrap uni-common-mt"><view class="uni-title uni-common-mt">Vertical Scroll<text>\n纵向滚动\n</text>当前已选一级分类：<view class="father-selected-container-lrx"  @tap="getType1"><view class="fatherSelected" v-for="item in allFathersSelected" :key="item.id" :id="JSON.stringify(item)">{{item.name}}</view></view>当前已选二级分类：<view class="son-selected-container-lrx"  @tap="getType2"><view class="sonSelected" v-for="item in allSonsSelected" :key="item.id" :id="JSON.stringify(item)">{{item.name}}</view></view></view><view class="sc-container-lrx"><view><scroll-view:style="{ height: myheight }":scroll-top="scrollTop1"scroll-y="true"class="scroll-Y firstSC"@scrolltoupper="upper1"@scrolltolower="lower1"@scroll="scroll1"@tap="getType1"><view v-for="(item,index) in allFathers" :key="index" :id="JSON.stringify(item)" :class="item.selected?'scroll-view-item uni-bg-blue':'scroll-view-item outline-lrx'" >{{item.name}}</view></scroll-view></view><view><scroll-view:style="{ height: myheight }":scroll-top="scrollTop2"scroll-y="true"class="scroll-Y"@scrolltoupper="upper2"@scrolltolower="lower2"@scroll="scroll2"@tap="getType2"><view v-for="(item,index) in allSonsReady" :key="index" :id="JSON.stringify(item)" :class="item.selected?'scroll-view-item uni-bg-blue':'scroll-view-item outline-lrx'">{{item.name}}</view></scroll-view></view></view><view class="gotop-container-lrx"><view @tap="goTop1" class=" uni-link uni-center uni-common-mt">点击这里返回顶部</view><view @tap="goTop2" class="uni-link uni-center uni-common-mt">点击这里返回顶部</view></view></view></view>
</template>
<script>export default {data() {return {// arr: [1,2,3,4,5,6,7,8,9,87,7,7,71,2,3,4,5,6,7,8,9,87,7,7,71,2,3,4,5,6,7,8,9,87,7,7,71,2,3,4,5,6,7,8,9,87,7,7,71,2,3,4,5,6,7,8,9,87,7,7,71,2,3,4,5,6,7,8,9,87,7,7,7,7,78,9,9,9,88,7,74,4,131,2,3,4,5,6,7,8,9,87,7,7,7,7,78,9,9,9,88,7,74,4,131,2,3,4,5,6,7,8,9,87,7,7,7,7,78,9,9,9,88,7,74,4,131,2,3,4,5,6,7,8,9,87,7,7,7,7,78,9,9,9,88,7,74,4,13],scrollTop1: 0,scrollTop2: 0,old: {scrollTop1: 0,scrollTop2: 0},// currentFather:3,types: [{ father: 0, name: '火锅', id: '1' , selected:false},{ father: 0, name: '炒菜', id: '2' , selected:false},{ father: 0, name: '西餐', id: '3' , selected:false},{ father: 1, name: '四川火锅', id: '4' , selected:false},{ father: 1, name: '重庆火锅', id: '5' , selected:false},{ father: 1, name: '北京火锅', id: '6' , selected:false},{ father: 1, name: '东北火锅', id: '7' , selected:false},{ father: 1, name: '西藏火锅', id: '8' , selected:false},{ father: 2, name: '川菜', id: '9' , selected:false},{ father: 2, name: '鲁菜', id: '10' , selected:false},{ father: 2, name: '淮扬菜', id: '11' , selected:false},{ father: 2, name: '粤菜', id: '12' , selected:false},{ father: 3, name: '法国菜', id: '13' , selected:false},{ father: 3, name: '日式料理', id: '14' , selected:false},{ father: 3, name: '东南亚料理', id: '15' , selected:false}],// fatherSelected:[//已经选择的一级分类// ],// sonSelected:[]};},computed: {allFathers(){//所有等待选择fatherreturn this.types.filter(item=>item.father==0)},allSonsSelected(){//所有已经选择的sonreturn this.types.filter(item=>item.father!=0).filter(item=>item.selected);},allFathersSelected(){//所有已经选择的fatherreturn this.allFathers.filter(item=>item.selected);},allSonsReady(){//所有等待选择的sonlet allFathersSelectedId = this.allFathersSelected.map(item=>item.id);return this.types.filter(item=>item.father!=0).filter(item=>allFathersSelectedId.indexOf(""+item.father)!=-1)},myheight() {let height = 0,top = 150, //顶部预留 单位upsbottom = 100, //底部预留 单位upstimes = 1.8; //uni.getSystemInfoSync().windowHeight太小了，给个翻倍系数try {height = uni.getSystemInfoSync().windowHeight * times;} catch (e) {height = 750 * times;}return uni.upx2px(height - top - bottom) + 'px';}},onLoad() {},methods: {// 到顶了upper1: function(e) {console.log('到顶了1', e);},upper2: function(e) {console.log('到顶了2', e);},// 到底了lower1: function(e) {console.log('到底了1', e);},lower2: function(e) {console.log('到底了2', e);},//滑动的时候触发scroll1: function(e) {this.old.scrollTop1 = e.detail.scrollTop;},scroll2: function(e) {this.old.scrollTop2 = e.detail.scrollTop;},//返回到顶部goTop1: function(e) {// 解决view层不同步的问题this.scrollTop1 = this.old.scrollTop1;this.$nextTick(function() {this.scrollTop1 = 0;});uni.showToast({icon: 'none',title: '纵向滚动 scrollTop 值已被修改为 0'});},goTop2: function(e) {// 解决view层不同步的问题this.scrollTop2 = this.old.scrollTop2;this.$nextTick(function() {this.scrollTop2 = 0;});uni.showToast({icon: 'none',title: '纵向滚动 scrollTop 值已被修改为 0'});},getType1:function(e){let current = e.target.id?JSON.parse(e.target.id):false;let types = this.types;if(current){//点在了item上types.forEach(item=>{//对他的选择状态取反if(item.id==current.id){item.selected = !item.selected}})//不管是取消还是选择，他的son都应该设置为falsetypes.filter(item=>item.father!==0).forEach(item=>{if(item.father==current.id){item.selected = false;}})}this.types= types;},getType2:function(e){let current = e.target.id?JSON.parse(e.target.id):false;let types = this.types;if(current){types.forEach(item=>{if(item.id==current.id){item.selected = !item.selected}})}this.types = types;}}
};
</script><style>
@font-face {font-family: uniicons;font-weight: normal;font-style: normal;src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
}
.outline-lrx{border: 1upx solid rgb(0,122,255);
}
.scroll-Y {height: 300upx;
}
scroll-view {width: 320upx;
}
.scroll-view-item {border: 1upx solid rgb(0,122,255);height: 50upx;line-height: 50upx;text-align: center;font-size: 18upx;display: inline-block;width: 38%;padding: 2%;margin: 3%;
}
.test {background: green;
}
.sc-container-lrx{display: flex;justify-content: space-between;
}
.gotop-container-lrx{display: flex;justify-content: space-between;
}
.gotop-container-lrx view{width: 50%;
}
.firstSC{padding-right: 25upx;border-right: 1upx solid #cccccc;
}
.fatherSelected,.sonSelected{border: 1px solid rgb(0,122,255);border-radius: 10upx;padding: 5upx 15upx;margin: 5upx 10upx;  position: relative;
}
.fatherSelected::after,.sonSelected::after{content: "\2718";font-size: 20upx;color: red;position: absolute;top: -20upx;right: -10upx;
}.father-selected-container-lrx,.son-selected-container-lrx{display: flex;justify-content: flex-start;align-content: center;flex-wrap: wrap;
}
</style>

截图如下

【uni-app、vue】scroll滑动、二级分类任性多选相关推荐

Vue - 实现垂直菜单分类栏目，鼠标移入后右侧出现悬浮二级菜单容器效果（完整示例源码，详细代码注释，一键复制开箱即用）
前言网上的教程都太乱了,各种杂乱无注释代码.图片资源丢失.一堆样式代码,根本无法改造后应用到自己的项目中. 本文实现了在 Vue / Nuxt 项目中,垂直分类菜单项,当用户鼠标移入菜单后,右侧自 ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
uni app 调用网络打印机_uni-app 的使用体验总结
[实践] uni-app 的使用总结最近使用 uni-app 的感受. 使用体验没用之前以为真和 Vue 一样,用了之后才知道.有点类似 Vue 和小程序结合的感觉.写类似小程序的标签,有着小程 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
html验证码的原理,滑动验证码的原理并利用 Vue 实现滑动验证码
做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大致说明下这些验证码的原理以及带大家实现一个滑动验证码. 我之 ...
二级分类_iOS 13.3正式版，增加信息联系人二级分类，支持联通VoLTE功能
iOS 13.3正式版,增加信息联系人二级分类,支持联通VoLTE功能就在今天凌晨Apple在apple store上架了Mac pro,同时也向iphone.ipad和ipad touch设备推送 ...
vue + element 顶部二级菜单_揭秘vue/react组件库中5个quot;作者不造的轮子quot;
点击上方"前端公虾米"关注最新前端资讯来源: 铁皮饭盒https://juejin.im/post/5d89cd156fb9a06acb3ee19e ? 这五个轮子其实是5个纯j ...
vue 入口main.js 调用app.vue 入口页面以及触发第三方登陆校验
main.js 代码: // The Vue build version to load with the `import` command // (runtime-only or standalon ...

【uni-app、vue】scroll滑动、二级分类任性多选

【uni-app、vue】scroll滑动、二级分类任性多选相关推荐

最新文章

热门文章