scroll滚动与better-scroll尝试

<template>
  <div>
    <span>原生scroll滚动</span>
    <div class="box1">
       <ul>
      <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
     <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
      <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
     <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
      <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
     <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
      <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
      <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
      <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
    </ul>

    </div>
   

     <div>
       <span>swiper滚动</span>
     <van-swipe  indicator-color="white" >
        <van-swipe-item v-for="(image, index) in swiperlist" :key="index">
          <ul class="swip">
            <li v-for="(it,indx) in image" :key="indx">
              <img :src="it.path" alt="" width="100%" height="100%"/>
            </li>
          </ul> 
        </van-swipe-item>
      </van-swipe>
 </div>

 <div>
   <span>bssroll插件滚动最佳</span>
    <bsscroll class="wrapper"
    :scrollX="scrollX"
              ref="scrol">
              <ul>
      <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
     <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
      <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
     <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
      <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
     <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
      <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
      <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
      <li><img src="https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg"
      width="100%" height="100%" alt=""></li>
              </ul>
          
    </bsscroll>

 </div>
  </div>
</template>

<script>
export default {
      data(){
        return{
          list:[
            [{title:'1111'},
            {title:'2111'},],
            [ {title:'1211'},
            {title:'1311'},
            {title:'1151'},]
           
          ],
          scrollX:true,
            swiperlist:[
                 [{title:'每日坚果大礼包孕妇老人儿童款',sale:'疯抢 8045 件',
                  price:'¥5.99',path:'https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg'},
                 {title:'每日坚果大礼包孕妇老人儿童款',sale:'疯抢 8045 件',
                  price:'¥5.99',path:'https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg'},
                  {title:'每日坚果大礼包孕妇老人儿童款',sale:'疯抢 8045 件',
                  price:'¥5.99',path:'https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg'}],
                 [{title:'每日坚果大礼包孕妇老人儿童款',sale:'疯抢 8045 件',
                  price:'¥5.99',path:'https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg'},
                 {title:'每日坚果大礼包孕妇老人儿童款',sale:'疯抢 8045 件',
                  price:'¥5.99',path:'https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg'},
                  {title:'每日坚果大礼包孕妇老人儿童款',sale:'疯抢 8045 件',
                  price:'¥5.99',path:'https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg'}],
                  [{title:'每日坚果大礼包孕妇老人儿童款',sale:'疯抢 8045 件',
                  price:'¥5.99',path:'https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg'},
                 {title:'每日坚果大礼包孕妇老人儿童款',sale:'疯抢 8045 件',
                  price:'¥5.99',path:'https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg'},
                  {title:'每日坚果大礼包孕妇老人儿童款',sale:'疯抢 8045 件',
                  price:'¥5.99',path:'https://img.alicdn.com/imgextra/i2/4095915205/O1CN01PqDzxg1oJw73HQqG6_!!4095915205.jpg_310x310.jpg'}],
            ]}
    }

}
</script>

<style lang="scss" scoped>
// 原生scroll滚动
.box1{
   width: 100%;/* 和父盒子宽度一样 */
  height: 150px;/* 比里层元素高16px 为了隐藏滚动条*/
 overflow: hidden;
   overflow-x: scroll;/* 定义超出此盒子滚动 */
  ul{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;/* 定义超出此盒子滚动 */
   overflow-y: hidden;
  height: 100%;
  width:270%;
  
  li{
    height: 150px;
    width: 150px;
    background: chartreuse;
  }
}

}
// .iamlist{
//   display: flex;
//   li{
//     width: 150px;
//     height: 150px;
//     background: seagreen;
//   }

// swiper
.swip{
  display: flex;
}

// bssroll插件滚动
.wrapper{
  width: 100%;
over-flow-hidden

  ul{
    width: 270%;
    display: flex;
    li{
      width: 120px;
    height: 120px;
    }
  }
}

</style>