css x軸滑動(dòng)

css代碼:

.list_box {
  background: #fff;
  width: 100%;
  height: 80rpx;
  border-bottom: 1px solid #f2f3f5;
}
.list_wrap {
  height: 80rpx;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 0 20rpx;
  white-space: nowrap;
}  
.list_ul {
    font-size: 32rpx;
    color: #666;
    white-space: nowrap;
}
.list_ul .list_li {
    box-sizing: border-box;
    display: inline-block;
}
.list_ul .list_li:after {
    content: '|';
    color: '#999' !important;
    margin-left: 8rpx;
    margin-right: 8rpx;
    height: 60rpx;
    display: inline-block;
}

html代碼:

<view class="list_box">
<view class="list_wrap">
<view class="list_ul">
  <view class="list_li {{ind==0 ? 'ac_orange' :''}}" bindtap="getInd" data-ind="0">推薦</view>
  <view class="list_li {{ind==1 ? 'ac_orange' :''}}" bindtap="getInd" data-ind="1">推薦1</view>
  <view class="list_li {{ind==2 ? 'ac_orange' :''}}" bindtap="getInd" data-ind="2">推薦2</view>
  <view class="list_li {{ind==3 ? 'ac_orange' :''}}" bindtap="getInd" data-ind="3">推薦3</view>
  <view class="list_li {{ind==4 ? 'ac_orange' :''}}" bindtap="getInd" data-ind="4">推薦4</view>
  <view class="list_li {{ind==5 ? 'ac_orange' :''}}" bindtap="getInd" data-ind="5">推薦5</view>
</view>
</view>
</view>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容