Open yangkaiyangyi opened 5 years ago
<template> <div class="listbox" > <div class="listwrapper" ref='listwrapper'> <ul class="listgoods"> <li v-for="(item,index) in scrollx.data.hotGoods" :key="index"> <img :src="item.image" alt="" srcset=""> </li> </ul> </div> </div> </template> <script> import BScroll from 'better-scroll';//引进这个实现滑动的插件 export default { data () { return { } }, computed:{ scrollx(){ return this.$store.state.productInfo } }, mounted(){ this.$nextTick(()=>{ this._initScroll(); console.log( this.listscroll); }) }, methods:{ _initScroll() { this.listscroll = new BScroll(this.$refs.listwrapper, { click: true ,//结合BScroll的接口使用,是否将click事件传递,默认被拦截了 wheel: false, //是否监听鼠标滚轮事件 **scrollX: true //这个需要添加-总是忘记** }); } } } </script> <style scoped> ul li { height: 100%; float: left; } .listwrapper{ height: 2rem; width: 100%; margin-top: 2rem; position: absolute; left: 0; top: 0; overflow: hidden; } .listgoods{ width:40rem; height: 2rem; display: block; } .listbox{ width: 100%; position: relative; } </style>
说明:从vuex中state获取的数据渲染到页面,引入Better-Scroll插件,渲染成商品横向列表,使之横向左右滑动,其中横向滑动的条件scrollX:true这一条件经常忘记,导致滑动无反应,切记切记 链接-vue遇到Better-Scroll封装 better-scroll滚动无效 几种原因
scrollX:true
说明:从vuex中state获取的数据渲染到页面,引入Better-Scroll插件,渲染成商品横向列表,使之横向左右滑动,其中横向滑动的条件
scrollX:true
这一条件经常忘记,导致滑动无反应,切记切记 链接-vue遇到Better-Scroll封装 better-scroll滚动无效 几种原因