better-scroll实现横向滚动 @劉䔳

scroll-better.png

首先先安装better-scroll插件

cnpm install better-scroll
npm install better-scroll
yarn add better-scroll

接下来，第二步是在项目中引入better-scroll对象import Bscroll from 'better-scroll'

import RecommendList from "../Recommend/RecommendList"

html中

  <div class="person-wrap" ref="personWrap">
       <ul class="person-list" ref="personTab">
           <router-link :to="'/ConcentrationHome/Detail/'+item.id" tag="li" v-for="(item,index) in newsList" :key="index">
               <img :src="item.pic" alt="">
               <p>{{item.title}}</p>
               <p>{{item.descript}}</p>
           </router-link>
       </ul>
    </div>

js代码

<script>
 props:["newsList"],
 created() {
        this.$nextTick(() => {
            this.personScroll();
        });
    },
 methods:{
        personScroll(){
            console.log(this.newsList.length)
            var width=this.newsList.length*310
            console.log(width)
            this.$refs.personTab.style.width = width + "px";
            // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
            this.$nextTick(() => {
                if (!this.scroll) {
                    this.scroll = new BScroll(this.$refs.personWrap, {
                        startX: 0,
                        click: true,
                        scrollX: true,
                        // 忽略竖直方向的滚动
                        scrollY: false,
                        eventPassthrough: "vertical"
                    });
                } else {
                    this.scroll.refresh();
                }
            });

        }
    }
 </script>

css样式

.person-wrap{
    width: 100%;
    height: pr(600px);
    background: white;
    float: left;
    flex: 1;
    touch-action: auto;
    overflow: auto;
    >ul{
        display: flex;
        min-width: 101%;
        height: pr(600px);
        background: white;
        box-sizing: border-box;
        li{
            width: pr(900px);
            height: pr(600px);
            padding: 0px 30px;
            box-sizing: border-box;
            img{
                width: pr(800px);
                height: pr(400px);
                display: block;
            }
            p{
                width: pr(800px);
                overflow: hidden;
                white-space: nowrap;  
                text-overflow: ellipsis;
            }
        }
    }
}