uni-app 完成横向滚动，scroll-view

柔情只为你懂 2023-02-14 02:56 25阅读 0赞

使用uni-app的小伙伴们大家可能都用过这个组件 scroll-view , 但是我们拿网站上的demo到本地运行，但是是运行不出来的，因为缺少一些css文件。

【先看下效果展示】：

![20200530141958775.gif][]

【完整代码】：

<template>
       <view>
         <scroll-view 
         class="scroll-view_H" 
         scroll-x="true" 
         :scroll-with-animation="true" 
         @scroll="scroll" scroll-left="0">
             <view  class="scroll-view-item" v-for="(item,idx) in recommendArr" :key="idx">
               <image :src="item.image"></image>
               <view class="title_level1">{
       {item.title}}</view>
               <view class="title_level2">{
       {item.label}}</view>
             </view>
         </scroll-view>
       </view>
    </template>
    
    <script>
      export default{
        data(){
          return{
            msg:'',
            old: {
                scrollTop: 0
            },
            recommendArr:[   // 推荐的商品
              {
                image:'',
                title:'特别推荐1',
                label:'早餐必备1'
              },
              {
                image:'',
                title:'特别推荐2',
                label:'早餐必备2'
              },
              {
                image:'',
                title:'特别推荐3',
                label:'早餐必备3'
              }
            ]
          }
        },
        methods:{
          // 横向滚动条滚动的距离
          scroll: function(e) {
              console.log(e)
              this.old.scrollTop = e.detail.scrollTop
          },
        }
      }
    </script>
    
    <style scoped>
    scroll-view ::-webkit-scrollbar {
      width: 0;
      height: 0;
      background-color: transparent;
    }
    .scroll-view_H{
      white-space: nowrap;
      overflow: hidden;
    }
    .scroll-view-item{
      width: 240rpx;
      height: 160rpx;
      display: inline-block;
      margin-right: 40rpx;
    }
    .scroll-view-item:last-child{
      margin-right: 0;
    }
    .scroll-view-item image{
      width: 100%;
      height: 120rpx;
      border-radius: 10rpx;
    }
    .title_level1{
      font-size: 26rpx;
    }
    .title_level2{
      font-size: 24rpx;
      color: #C8C7CC;
    }
    </style>

[20200530141958775.gif]: https://img-blog.csdnimg.cn/20200530141958775.gif