快捷導(dǎo)航

微信小程序-橫向滑動scroll-view隱藏滾動條

更新時間：2017年04月20日 08:33:15 作者：Mr_Sparta

本篇文章主要介紹了微信小程序-橫向滑動scroll-view隱藏滾動條的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧

wxml

 <scroll-view class="recommend_scroll_x_box" scroll-x="true">
   <view class="recommend_hot_box" wx:for="{{hotList}}">
    <image src="{{item.pic}}" class="recommend_hot_image"></image>
   </view>
  </scroll-view>

wxss

.recommend_scroll_x_box {
 height: 245rpx;
 white-space: nowrap;
 display: flex;
}

::-webkit-scrollbar {
 width: 0;
 height: 0;
 color: transparent;
}

.recommend_hot_box {
 width: 230rpx;
 height: 245rpx;
 margin-right: 24rpx;
 display: inline-block;
}

.recommend_hot_image {
 width: 230rpx;
 height: 143rpx;
}

js

Page({
 data: {
  hotList: [
   {
    pic: '/images/example2.png',
    title: '玻璃棧道',
    desc: '22W人去過'
   }, {
    pic: '/images/example2.png',
    title: '玻璃棧道',
    desc: '22W人去過'
   }, {
    pic: '/images/example2.png',
    title: '玻璃棧道',
    desc: '22W人去過'
   }, {
    pic: '/images/example2.png',
    title: '玻璃棧道',
    desc: '22W人去過'
   }, {
    pic: '/images/example2.png',
    title: '玻璃棧道',
    desc: '22W人去過'
   }
  ]
 }

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解JavaScript數(shù)組reduce()方法的高級技巧
reduce()?是?JavaScript?中一個很有用的數(shù)組方法，這篇文章主要介紹了JavaScript中reduce()方法的高級技巧，感興趣的小伙伴可以了解一下
2023-03-03
微信小程序靜默登錄和維護(hù)自定義登錄態(tài)詳解
這篇文章主要給大家介紹了關(guān)于微信小程序靜默登錄和維護(hù)自定義登錄態(tài)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
js實現(xiàn)數(shù)組去重方法及效率對比
本文主要介紹了js實現(xiàn)數(shù)組去重方法及效率對比。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
Javascript實現(xiàn)字?jǐn)?shù)統(tǒng)計
現(xiàn)在流行的Twitter等微博客網(wǎng)站，有一個很好的用戶體驗，就是在文本框中輸入文字的時候，會自動統(tǒng)計輸入的字符，并顯示用戶還能輸入的字符，在限制了140個字的微博客中，這樣的小提示可以很好的增強用戶體驗。
2015-07-07
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)的七種排序算法的相關(guān)資料,七種排序算法分別是：冒泡排序、選擇排序、插入排序、希爾排序、堆排序、快速排序以及歸并排序,需要的朋友可以參考下
2021-07-07