yangkaiyangyi / prombles

0 stars 0 forks source link

vue中better-scroll中页面滚动无效的问题 #2

Open yangkaiyangyi opened 5 years ago

yangkaiyangyi commented 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滚动无效 几种原因