固定

先實現(xiàn)一個固定不能滑動的欄目

<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里面的數(shù)據(jù)悲幅，圖片從你本地隨意找一張览妖，數(shù)據(jù)都是公用的，下面就不再寫了挥下。

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>

數(shù)據(jù)同上

.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> 

數(shù)據(jù)同上

.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實現(xiàn)吸頂效果

文檔

原生scroll-view

網(wǎng)站導航

網(wǎng)站導航