微信小程序-横向滑动scroll-view隐藏滚动条

2019/6/27 21:01:08

本文主要是介绍微信小程序-横向滑动scroll-view隐藏滚动条,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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人去過'
   }
  ]
 }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持找一找教程网!



这篇关于微信小程序-横向滑动scroll-view隐藏滚动条的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程