上下滚动
项目源码地址
https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd
使用第三方插件库better-scroll
BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
BetterScroll 是使用纯 JavaScript 实现的,这意味着它是无依赖的。
下载better-scroll
npm i better-scroll --save
在需要使用的组件中引入模块
这里是在搜索页面引入,所以在Search.vue中引入模块
import BScroll from 'better-scroll'
初始化
通过watch监听实现一旦页面数据刷新,就重新渲染页面,实现滚动效果,确保页面渲染前会有数据
better-scroll的初始化一定要在数据渲染完成后进行,所以通过监听方法监听数据变化
在Shop.vue写入监听方法
<template> <div class="shop"> <!--左边--> <div class="menu-wrapper"> <ul> <!--current--> <li class="menu-item" v-for="(goods, index) in searchgoods" :key="index" > <span>{{goods.name}}</span> </li> </ul> </div> <!--右边--> <div class="shop-wrapper"> <ul> <li class="shops-li" v-for="(goods, index1) in searchgoods" :key="index1" > <div class="shops-title"> <h4>{{goods.name}}</h4> <a href="">查看更多 ></a> </div> <ul class="phone-type" v-if="goods.tag === 'phone'"> <li v-for="(phone,index3) in goods.category" :key="index3" > <img :src="phone.icon" alt=""> </li> </ul> <ul class="shops-items"> <li v-for="(item, index2) in goods.items" :key="index2"> <img :src="item.icon" alt=""> <span>{{item.title}}</span> </li> </ul> </li> </ul> </div> </div> </template> <script> //1:引入vuex中从服务器端发送过来的数据,也就是state.js中的数据 import { mapState} from 'vuex'; //引入第三方插件库实现滚动效果 import BScroll from 'better-scroll' export default { name: "Shop", mounted() { //:2:请求搜索列表数据 this.$store.dispatch('reqSearchGoods' // //通过actions.js中的执行回调来在数据刷新后渲染页面 // ,()=>{ // this._initBScroll(); // } ); }, computed: { //3:获取搜索列表数据 ...mapState(['searchgoods']) }, watch: { searchgoods() { this.$nextTick(()=>{ //监听初始化方法 this._initBScroll(); }) } }, methods: { _initBScroll() { //1:左边 let leftScroll = new BScroll('.menu-wrapper', { scrollY: true, //当设置为 true 的时候,可以开启纵向滚动。 click: true }); //1:左边 let rightScroll = new BScroll('.shop-wrapper', { scrollY: true, //当设置为 true 的时候,可以开启纵向滚动。 click: true }) } } } </script> <style scoped lang="stylus" rel="stylesheet/stylus"> //css样式见源码 </style>