vue 编写H5项目使用BScroll “better-scroll“；两边都滚动，并且联系

1.先下载better-scroll

yarn add @better-scroll/core

2.组件中引入better-scroll

import BScroll from "better-scroll";

3.先展示html代码

<template><div class="shop"><div class="Leftshop"><div class="Leftlist"><template v-for="(item, index) in shopListas"><divclass="Leftlist_item":key="index"v-if="item.shopGather.length != 0":class="[{ typeStyle: index == currentIndex },{ typeStyles: index == currentIndex - 1 },{ typeStylex: index == currentIndex + 1 },]"@click="onClickNav(index)"><div class="list_name">{{ item.shopName }}</div><div class="list_space"></div><divclass="list_price":class="{ listblue: index == currentIndex }">{{ item.shopGather.length }}</div></div></template></div></div><div class="Rightshop"><div class="category"><divclass="category_item":class="{ blue: Selectstate == 'all' }"@click="Stateswitching('all')">全部</div>|<divclass="category_item":class="{ blue: Selectstate == 'put' }"@click="Stateswitching('put')">已上架</div>|<divclass="category_item":class="{ blue: Selectstate == 'pull' }"@click="Stateswitching('pull')">已下架</div><div class="category_items"><img:src="install"alt=""class="install"v-show="!setup"@click="setup = true"/><van-checkboxv-model="allselect"shape="square"v-show="setup"class="installs"@click="Selectall"></van-checkbox></div></div><div class="Rightlist"><div class="Rightlists" ref="Rightlist"><divv-for="(item, index) in shopListas":key="index"class="list"v-show="item.shopGather.length != 0"><div class="Rightlistname">{{ item.shopName }}</div><RightlistLitemIndex :shopGather="item.shopGather" :setup="setup" /></div></div></div></div><div class="setuppopup" v-show="setup"><div>删除</div>|<div @click="shiyan">上架</div>|<div @click="Dialogup('alert', '好的', '好')">下架</div>|<div @click="show = true">移动</div>|<div @click="setup = false">退出</div></div><van-popup v-model="show" round position="bottom" class="popupup"><div class="popupupper"><div class="popupupper_item"><div class="cancel">取消</div><div>请移动至分类</div><div class="confirm">确认</div></div></div><div class="seizeaseat"></div><van-radio-group v-model="radio" class="popupmain"><van-radio name="1" class="popupmainradio"><div>单选框 1单选框 1单选框 1单选框 1单选框 1单选框 1单选框 1单选框单选框1单选框 1单选框 1单选框 1单选框 1单选框 1单选框 1单选框 1</div></van-radio><van-radio name="2" class="popupmainradio">单选框 2</van-radio><van-radio name="3" class="popupmainradio">单选框 2</van-radio><van-radio name="4" class="popupmainradio">单选框 2</van-radio><van-radio name="5" class="popupmainradio">单选框 2</van-radio><van-radio name="6" class="popupmainradio">单选框 2</van-radio><van-radio name="7" class="popupmainradio">单选框 2</van-radio><van-radio name="8" class="popupmainradio">单选框 2</van-radio><van-radio name="9" class="popupmainradio">单选框 2</van-radio><van-radio name="10" class="popupmainradio">单选框 2</van-radio><van-radio name="11" class="popupmainradio">单选框 2</van-radio></van-radio-group></van-popup></div>
</template>

4.先挂载实现滚动效果，外层盒子要设置溢出隐藏

initScroll() {this.foodsScroll = new BScroll(".Leftshop", {probeType: 2, // 因为惯性滑动不会触发click: true,bounce: false,tap: true,});// 右边组件实例上挂属性this.foodsScrolls = new BScroll(".Rightlist", {probeType: 2, // 因为惯性滑动不会触发click: true,bounce: false,tap: true,});// 给右侧列表绑定scroll监听this.foodsScrolls.on("scroll", ({ x, y }) => {this.scrollY = Math.abs(y);});// 给右侧列表绑定scroll结束的监听this.foodsScrolls.on("scrollEnd", ({ x, y }) => {this.scrollY = Math.abs(y);this.foodsScroll.scrollTo(0,-(this.currentIndex * (this.Leftheight - this.Leftheights)) /this.shopListas.length,1000);});

5.实现右边滚动联系左边

initializeOwn() {// 获取左边高度this.Leftheight = document.querySelector(".Leftlist").offsetHeight;// 获取左边外框高度this.Leftheights = document.querySelector(".Leftshop").offsetHeight;// 获取右边高度this.Rightheight = document.querySelector(".Rightlists").offsetHeight;// 初始化rightSideconst rightSide = [];let top = 0;rightSide.push(top);// 找到所有分类下的liconst lis = this.$refs.Rightlist.getElementsByClassName("list"); //获取dom元素lii（eventList），对其进行操作// slice() 方法返回一个新的数组对象Array.prototype.slice.call(lis).forEach((li) => {top += li.clientHeight; //相当于top = top + li.clientHeightrightSide.push(top);});//更新数据this.rightSide = rightSide;// console.log("每一个分类的下标" + rightSide);},

计算属性

currentIndex() {const { scrollY, rightSide } = this; //拿到每次滑动的值以及每一个分类的下标值const index = rightSide.findIndex((top, index) => {// scrollY>=当前top && scrollY<下一个topreturn scrollY >= top && scrollY < rightSide[index + 1];});// 返回结果return index;},

6.左边点击使其左边滚动

onClickNav(index) {console.log(index);// 拿到目标位置的scrollY，点击左侧导航，右侧列表滑动到对应的位置const scrollY = this.rightSide[index];// 点击的分类成为当前分类，索引当前选中的导航标题this.scrollY = scrollY;// 平滑滑动右侧列表this.foodsScrolls.scrollTo(0, -scrollY, 1000);},

7.完成附上完整代码

<template><div class="shop"><div class="Leftshop"><div class="Leftlist"><template v-for="(item, index) in shopListas"><divclass="Leftlist_item":key="index"v-if="item.shopGather.length != 0":class="[{ typeStyle: index == currentIndex },{ typeStyles: index == currentIndex - 1 },{ typeStylex: index == currentIndex + 1 },]"@click="onClickNav(index)"><div class="list_name">{{ item.shopName }}</div><div class="list_space"></div><divclass="list_price":class="{ listblue: index == currentIndex }">{{ item.shopGather.length }}</div></div></template></div></div><div class="Rightshop"><div class="category"><divclass="category_item":class="{ blue: Selectstate == 'all' }"@click="Stateswitching('all')">全部</div>|<divclass="category_item":class="{ blue: Selectstate == 'put' }"@click="Stateswitching('put')">已上架</div>|<divclass="category_item":class="{ blue: Selectstate == 'pull' }"@click="Stateswitching('pull')">已下架</div><div class="category_items"><img:src="install"alt=""class="install"v-show="!setup"@click="setup = true"/><van-checkboxv-model="allselect"shape="square"v-show="setup"class="installs"@click="Selectall"></van-checkbox></div></div><div class="Rightlist"><div class="Rightlists" ref="Rightlist"><divv-for="(item, index) in shopListas":key="index"class="list"v-show="item.shopGather.length != 0"><div class="Rightlistname">{{ item.shopName }}</div><RightlistLitemIndex :shopGather="item.shopGather" :setup="setup" /></div></div></div></div><div class="setuppopup" v-show="setup"><div>删除</div>|<div @click="shiyan">上架</div>|<div @click="Dialogup('alert', '好的', '好')">下架</div>|<div @click="show = true">移动</div>|<div @click="setup = false">退出</div></div><van-popup v-model="show" round position="bottom" class="popupup"><div class="popupupper"><div class="popupupper_item"><div class="cancel">取消</div><div>请移动至分类</div><div class="confirm">确认</div></div></div><div class="seizeaseat"></div><van-radio-group v-model="radio" class="popupmain"><van-radio name="1" class="popupmainradio"><div>单选框 1单选框 1单选框 1单选框 1单选框 1单选框 1单选框 1单选框单选框1单选框 1单选框 1单选框 1单选框 1单选框 1单选框 1单选框 1</div></van-radio><van-radio name="2" class="popupmainradio">单选框 2</van-radio><van-radio name="3" class="popupmainradio">单选框 2</van-radio><van-radio name="4" class="popupmainradio">单选框 2</van-radio><van-radio name="5" class="popupmainradio">单选框 2</van-radio><van-radio name="6" class="popupmainradio">单选框 2</van-radio><van-radio name="7" class="popupmainradio">单选框 2</van-radio><van-radio name="8" class="popupmainradio">单选框 2</van-radio><van-radio name="9" class="popupmainradio">单选框 2</van-radio><van-radio name="10" class="popupmainradio">单选框 2</van-radio><van-radio name="11" class="popupmainradio">单选框 2</van-radio></van-radio-group></van-popup></div>
</template><script>
import BScroll from "better-scroll";
import { Dialog, Toast } from "vant";
export default {name: "BScrollIndex",data() {return {install: require("@/assets/images/icons/install.png"),shopList: [{shopName: "菜名1",shopGather: [{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},],},{shopName: "菜名2",shopGather: [{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: false,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},],},{shopName: "菜名3",shopGather: [{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: false,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: false,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},],},{shopName: "菜名4",shopGather: [{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: false,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: false,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},],},{shopName: "菜名5",shopGather: [{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: false,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},],},{shopName: "菜名6",shopGather: [{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: false,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},],},{shopName: "菜名7",shopGather: [{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: false,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},],},{shopName: "菜名8",shopGather: [{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: false,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: false,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},],},{shopName: "菜名9",shopGather: [{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: false,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: false,},],},{shopName: "菜名10",shopGather: [{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: false,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},{shopImgUrl:"https://pic.imgdb.cn/item/62f20c6516f2c2beb12fcdb8.png",shopName: "豆干片",Price: 20.89,Discount: 14.99,click: false,startup: true,},],},],scrollY: 0, // 右侧滑动的时候距离顶部的值rightSide: [], // 所有右侧分类li的top组成的数组  (列表第一次显示后就不再变化)Leftheight: 0, // 左侧分类的高度Leftheights: 0, // 左侧分类框的高度Rightheight: 0, // 右侧分类的高度Selectstate: "all", // 当前商品的状态checked: false, //全选框状态setup: false, //设置框状态show: false, //设置框状态,radio: 1, //默认单选};},methods: {initScroll() {this.foodsScroll = new BScroll(".Leftshop", {probeType: 2, // 因为惯性滑动不会触发click: true,bounce: false,tap: true,});// 右边组件实例上挂属性this.foodsScrolls = new BScroll(".Rightlist", {probeType: 2, // 因为惯性滑动不会触发click: true,bounce: false,tap: true,});// 给右侧列表绑定scroll监听this.foodsScrolls.on("scroll", ({ x, y }) => {this.scrollY = Math.abs(y);});// 给右侧列表绑定scroll结束的监听this.foodsScrolls.on("scrollEnd", ({ x, y }) => {this.scrollY = Math.abs(y);this.foodsScroll.scrollTo(0,-(this.currentIndex * (this.Leftheight - this.Leftheights)) /this.shopListas.length,1000);});},initializeOwn() {// 获取左边高度this.Leftheight = document.querySelector(".Leftlist").offsetHeight;// 获取左边外框高度this.Leftheights = document.querySelector(".Leftshop").offsetHeight;// 获取右边高度this.Rightheight = document.querySelector(".Rightlists").offsetHeight;// 初始化rightSideconst rightSide = [];let top = 0;rightSide.push(top);// 找到所有分类下的liconst lis = this.$refs.Rightlist.getElementsByClassName("list"); //获取dom元素lii（eventList），对其进行操作// slice() 方法返回一个新的数组对象Array.prototype.slice.call(lis).forEach((li) => {top += li.clientHeight; //相当于top = top + li.clientHeightrightSide.push(top);});//更新数据this.rightSide = rightSide;// console.log("每一个分类的下标" + rightSide);},onClickNav(index) {console.log(index);// 拿到目标位置的scrollY，点击左侧导航，右侧列表滑动到对应的位置const scrollY = this.rightSide[index];// 点击的分类成为当前分类，索引当前选中的导航标题this.scrollY = scrollY;// 平滑滑动右侧列表this.foodsScrolls.scrollTo(0, -scrollY, 1000);},Selectall() {const { shopList, currentIndex } = this;// console.log(shopListas, currentIndex);shopList[currentIndex].shopGather.forEach((item) => {item.click = true;});console.log("全选完成");},//状态切换Stateswitching(state) {this.Selectstate = state;console.log(this.currentIndex);this.$nextTick(() => {this.initScroll();this.initializeOwn();setTimeout(this.onClickNav(this.currentIndex), 0);//   this.scrollY=0;});// this.scrollY=0;console.log(this.currentIndex);//  console.log(this.shopListas);},//弹出框Dialogup(fun, val, click) {Dialog[fun]({message: val,confirmButtonColor: "#0888EC",cancelButtonColor: "#ACBBCF",confirmButtonText: click,}).then(() => {console.log("“确认”");// on close}).catch(() => {console.log("“取消”");// on cancel});},shiyan() {Toast("提示内容");},filterData(arr, value) {return arr.filter((item) => {if (item.startup === !value) {return false;}if (item.shopGather && item.shopGather.length > 0) {item.shopGather = this.filterData(item.shopGather, value);}return true;});},},//计算属性computed: {currentIndex() {const { scrollY, rightSide } = this; //拿到每次滑动的值以及每一个分类的下标值const index = rightSide.findIndex((top, index) => {// scrollY>=当前top && scrollY<下一个topreturn scrollY >= top && scrollY < rightSide[index + 1];});// 返回结果return index;},//当前分类全选返回ture,使得全选框选中allselect: {get() {const { currentIndex } = this;if (currentIndex == -1) {return false;} else {return this.shopListas[currentIndex].shopGather.every((shop) => shop.click);}},set(newValue) {return newValue;},},shopListas() {const { shopList, Selectstate } = this;switch (Selectstate) {case "all":return JSON.parse(JSON.stringify(shopList));case "put":return this.filterData(JSON.parse(JSON.stringify(shopList)), true);case "pull":return this.filterData(JSON.parse(JSON.stringify(shopList)), false);default:return JSON.parse(JSON.stringify(shopList));}},},mounted() {this.$nextTick(() => {this.initScroll();this.initializeOwn();});},
};
</script>
<style lang="scss" scoped>
.shop {display: flex;justify-content: space-between;.popupup {width: 100%;max-height: 956.5px;.popupupper {height: 88px;width: 750px;.popupupper_item {width: 690px;height: 88px;line-height: 88px;margin: 0 auto;display: flex;justify-content: space-between;font-size: 30px;font-weight: 400;color: #000000;border-bottom: 1px solid #e5e5e5;.cancel {color: #acbbcf;}.confirm {color: #0888ec;}}}.seizeaseat {width: 750px;height: 63px;}.popupmain {max-height: 806px;overflow: hidden;overflow-y: scroll;width: 690px;margin: 0 auto;.popupmainradio {height: 100px;width: 690px;div {width: 630px;overflow: hidden; /*超出的部分隐藏起来。*/white-space: nowrap; /*不显示的地方用省略号...代替*/text-overflow: ellipsis; /* 支持 IE */}}}.popupmain::-webkit-scrollbar {display: none;}}.Leftshop {background-color: #ffffff;width: 170px;height: calc(100vh - 273px);overflow: hidden;.Leftlist {.message {float: left;}.Leftlist_item {background-color: #efefef;height: 135px;display: flex;flex-direction: column;align-items: center;justify-content: center;.list_name {font-size: 28px;font-weight: 500;color: #1a1a1a;line-height: 42px;}.list_space {height: 14px;width: 100%;}.list_price {height: 33px;font-size: 24px;font-weight: 400;color: #1a1a1a;line-height: 33px;}.listblue {background-color: #e6f2ff;color: #0762da;border-radius: 17px;padding: 0 10px;}}.typeStyle {/* 左侧导航选中的样式 */background-color: #ffffff;}.typeStyles {/* 左侧导航选中的样式 */border-radius: 0 0 10px 0;}.typeStylex {/* 左侧导航选中的样式 */border-radius: 0 10px 0 0;}}}.Rightshop {background-color: #ffffff;width: 570px;// border: 1px solid #ccc;.category {width: 554px;height: 122px;display: flex;align-items: center;justify-content: space-between;.category_item {display: flex;justify-content: center;align-items: center;width: 120px;height: 66px;border-radius: 10px;font-size: 28px;font-weight: 400;}.category_items {display: flex;// justify-content: center;flex-direction: row-reverse;align-items: center;width: 120px;height: 66px;border-radius: 10px;font-size: 28px;font-weight: 400;.install {width: 39px;height: 34px;margin-right: 15px;}.installs {margin-right: 15px;}}.blue {background-color: #e6f2ff;color: #157ff0;}.category_item_active {background-color: #e6f2ff;color: #157ff0;}}.Rightlist {height: 878px;height: calc(100vh - 395px);overflow: hidden;.Rightlists {width: 550px;margin: 0 auto;.Rightlistname {font-size: 26px;font-weight: bold;color: #1a1a1a;}}}}.setuppopup {width: 100%;height: 88px;display: flex;background-color: #fff;justify-content: space-evenly;align-items: center;color: #cecece;font-size: 30px;font-weight: 400;position: fixed;bottom: 0px;z-index: 100;div {color: #1a1a1a;}div:last-child {color: #ff4d48;}}
}
</style>

<template><div><div v-for="(item, index) in shopGather" :key="index"><div class="shop_item"><div><div class="shop_up" v-if="!item.startup"><div>已下架</div></div><img :src="item.shopImgUrl" alt="" class="shop_img" /><img :src="Badge" alt="" class="shop_Badge" /></div><div class="shop_itemcontent"><div class="shop_name">{{ item.shopName }}</div><div class="contents"><div class="contentname"><div class="contentintr">自制豆干哟</div><div class="contentdetails"><div class="Price">{{ item.Price }}</div><div class="Discount"><img :src="vip" alt="" class="vip" /><span class="Discountnum">{{ item.Discount }}</span></div></div></div><div class="arrow" v-show="!setup"><van-iconname="arrow-up":color="index == 0 ? '#C2C2C2' : '#777777'"size="0.6rem"/><van-iconname="arrow-down":color="index == shopGather.length - 1 ? '#C2C2C2' : '#777777'"size="0.6rem"/></div><div class="arrows" v-show="setup"><van-checkboxv-model="item.click"shape="square"@click="choiceclick(index)"></van-checkbox></div></div></div></div><div class="shop_blank"></div></div></div>
</template><script>
export default {name: "Rightlist_litemIndex",data() {return {vip: require("@/assets/images/icons/vip.png"),Badge: require("@/assets/images/icons/Badge.png"),};},props: ["shopGather", "setup"],methods: {choiceclick(index) {// this.$forceUpdate();console.log(index);},},
};
</script>
<style lang="scss" scoped>
.shop_item {width: 533px;height: 216px;display: flex;justify-content: space-between;position: relative;.shop_img {width: 214px;height: 214px;border-radius: 10px;}.shop_Badge {width: 72px;height: 44.35px;position: absolute;top: -5px;left: -5px;}.shop_up {width: 214px;height: 214px;border-radius: 10px;position: absolute;top: 0;display: flex;align-items: center;justify-content: center;background-color: rgba(239, 239, 239, 0.78);div {width: 108px;height: 108px;background-color: #efefef;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #5c697a;font-size: 24px;}}.shop_itemcontent {width: 300px;.shop_name {height: 48px;line-height: 48px;font-size: 34px;font-weight: 400;color: #1a1a1a;}.contents {display: flex;justify-content: space-between;height: 168px;.contentname {display: flex;justify-content: space-between;flex-direction: column;.contentintr {font-size: 24px;font-weight: 400;color: #757575;height: 34px;line-height: 34px;}.contentdetails {.Price {color: #ff4d48;font-size: 30px;height: 42px;line-height: 42px;}.Price::before {content: "¥";// color: #000;font-size: 22px;}.Price::after {content: "/份起";font-size: 22px;}.Discount {background-color: #ffddbc;line-height: 30px;height: 30px;display: flex;align-content: center;border-radius: 4px;.vip {height: 30px;}.Discountnum {margin: 0 10px;font-size: 24px;}.Discountnum::before {content: "¥";font-size: 16px;}.Discountnum::after {content: "起";font-size: 16px;}}}}.arrow {display: flex;flex-direction: column;justify-content: space-between;}.arrows {display: flex;flex-direction: column-reverse;}}}
}
.shop_blank {height: 29px;
}
</style>

vue 编写H5项目使用BScroll “better-scroll“；两边都滚动，并且联系相关推荐

vue代码怎么变成小程序_使用vue编写h5公众号跳转小程序的实现代码
前言:我使用vue编写的h5公众号,实现点击小程序入口,打开小程序,微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_App ...
vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付
本文仅记录基于vue开发h5项目过程中使用支付宝和微信支付过程中的重点与槽点,仅为前端部分,如有疏漏不正之处,请于文末评论探讨.注意:标红部分灰常重要,仔细阅读官方文档非常重要,耐心非常重要,细心非常 ...
vue做h5项目横屏
vue做h5项目横屏竖屏切换,主要叙述横屏样式逻辑是旋转页面就可以页面代码结构: <div class="widDiv"><div></div&g ...
【仅为记录】vue的H5项目在IOS上打开白屏问题
记录同事踩得一个坑,关于vue的H5项目在ios上白屏 ios上的H5应用打开是一片白屏,说实话刚遇到的时候真是麻了,恨不得给所有测试人都买一部安卓机(bushi) 上网搜了下,最后解决问题的,是在初 ...
使用HBuilderX将vue或H5项目打包app
好久没有搞过将vue项目打包成app了,这两天刚好项目需要将vue开发的H5项目打包成APP,那就简单记录一次呗(之前也写过一篇打包app,是将项目使用hbuilder打开,转为webapp什么的,就 ...
vue 搭建H5项目及适配
1.创建项目 vue create test (项目名称) vue2完整创建流程 2.进行H5适配 2.1 选择ui框架(以vantui 为例) 具体 ...
围观，听说你用Vue写H5项目了？
没错,我用Vue写了一个H5项目,来看下我踩坑记录吧. 1.按需引入在开发过程中,会遇到很多五花八门的库.其实这些库中有很多功能/模块是用不到的,所以,这里推荐按需引入: import { Slid ...
vue中h5项目怎么使用weui
注:项目使用vue cli脚手架,最新版脚手架创建项目参考这里一.安装weui 安装weui js文件和css文件: cnpm i weui.js weui --S 二.将文件引入项目中在main ...
uniapp，vue中h5项目实现数字密码键盘
本来原生的h5 直接input type="password" 这样会发现也不是说不能输入数字. 只是让用户多了一步操作的切换到数字的情况才能输入. 不知道安卓手机如何反正苹 ...
vue 编写H5页面在公众号外部获取手机本地坐标经纬度
1.必须先注册个公众号,且认证后去下面这个地方配置好您的域名这仨地方都得设置,目前我试了下用域名还是用具体项目所在的文件夹目录没什么明显差异譬如你是用shuzhiqiang.com或者shuzhiq ...

vue 编写H5项目使用BScroll “better-scroll“；两边都滚动，并且联系

vue 编写H5项目使用BScroll “better-scroll“；两边都滚动，并且联系相关推荐

最新文章

热门文章