固定

先实现一个固定不能滑动的栏目

<div class="circle-list">
  <div class="circle-item" :key="key" v-for="(idx, key) in iconMap">
    <img :src="iconImg" alt="" :style="{background: iconMap[key]['bk']}">
    <span>{{iconMap[key]['title']}}</span>
  </div>
</div>

data里面的数据，图片从你本地随意找一张，数据都是公用的，下面就不再写了。

iconMap: {
    'icon-caigou': {title: '美食', bk: '#EF8B3E'}, 
    'icon-shangpin': {title: '猫眼电影', bk: '#E4463B'},
    'icon-touchengkongyun': {title: '酒店住宿', bk: '#8B67E5'},
    'icon-daohang': {title: '休闲娱乐', bk: '#5DC7B0'},
    'icon-zitigui': {title: '外卖', bk: '#F3AE42'},
    'icon-jiesuan': {title: 'KTV', bk: '#5DC1A9'},
    '.icon-jijianfasong': {title: '丽人', bk: '#EC5B6E'},
    'icon-shoucang': {title: '景点门票', bk: '#5CA2F2'},
    'icon-baobiao': {title: '火车票', bk: '#FD9D21'},
    'icon-pifuzhuti': {title: '民宿', bk: '#BED300'},
},
iconImg: '../../static/img/me.png',

.circle-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .circle-item {
        flex: 1;
        margin-bottom: 10px;
        img {
            border-radius: 50%;                
            width: 110rpx;
            height: 110rpx;
            margin: 0 20rpx;
        }
        span {
            display: block;
            width: 150rpx;
            font-size: 24rpx;
            text-align: center;
        }
    }
}

横向

<scroll-view class='scroll-view-list' scroll-x="true">
  <div class="scroll-view-item" :key="key" v-for="(idx, key) in iconMap">
    <img :src="iconImg" alt="" :style="{background: iconMap[key]['bk']}">
    <span>{{iconMap[key]['title']}}</span>
  </div>
</scroll-view>

数据同上

.scroll-view-list {
    white-space: nowrap;
    overflow-x: scroll;
    .scroll-view-item {
        display: inline-block;
        margin-bottom: 10rpx;
        height: 180rpx;
        img {
            border-radius: 50%;                
            width: 110rpx;
            height: 110rpx;
            margin: 0 20rpx;
        }
        span {
            display: block;
            width: 150rpx;
            font-size: 24rpx;
            text-align: center;
        }
    }
}

纵向

<scroll-view class='scroll-view-list-vertical' scroll-y="true">
  <div class="scroll-view-item-vertical" :key="key" v-for="(idx, key) in iconMap">
    <img :src="iconImg" alt="" :style="{background: iconMap[key]['bk']}">
    <span>{{iconMap[key]['title']}}</span>
  </div>
</scroll-view> 

数据同上

.scroll-view-list-vertical {
    height: 360rpx;
    .scroll-view-item-vertical {                
        height: 180rpx;
        width: 110rpx;
        margin: 10rpx auto;  
        text-align: center;          
        img {
            border-radius: 50%;                
            width: 110rpx;
            height: 110rpx;            
        }
        span {                
            font-size: 24rpx;                
        }
    }
}

案例

微信小程序mpvue实现吸顶效果

文档

原生scroll-view

网站导航

网站导航