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

 更新时间:2017年04月20日 08:33:15   作者:Mr_Sparta   我要评论
本篇文章主要介绍了微信小程序-横向滑动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人去過'
   }
  ]
 }

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

相关文章

  • ES6中的数组扩展方法

    ES6中的数组扩展方法

    这篇文章主要介绍了ES6中的数组扩展方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • 浅析js中substring和substr的方法

    浅析js中substring和substr的方法

    这篇文章主要介绍了js中substring和substr的方法,对substring和substr的方法进行描述和说明,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • javascript发送短信验证码实现代码

    javascript发送短信验证码实现代码

    我们在注册账号,或者是参加活动时,都会向手机发送收短信验证码,短信验证码到底是如何实现的,本文为大家揭晓,并为大家分项1javascript发送短信验证码实现代码,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 鼠标经过tr时,改变tr当前背景颜色

    鼠标经过tr时,改变tr当前背景颜色

    本篇文章主要介绍了鼠标经过tr时,改变tr当前背景颜色的示例代码,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JS实现指定区域的全屏显示功能示例

    JS实现指定区域的全屏显示功能示例

    这篇文章主要介绍了JS实现指定区域的全屏显示功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-04-04
  • 仅Firefox中链接A无法实现模拟点击以触发其默认行为

    仅Firefox中链接A无法实现模拟点击以触发其默认行为

    偶然发现之前写的事件模块在Firefox5中无法触发A的默认行为了。IE/Opera/Firefox5中A具有click方法,因此模拟点击直接调用click方法即可。
    2011-07-07
  • JS图片预加载插件详解

    JS图片预加载插件详解

    这篇文章主要为大家详细介绍了JS图片预加载插件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Javascript中实现trim()函数的两种方法

    Javascript中实现trim()函数的两种方法

    这篇文章主要介绍了Javascript中实现trim()函数的两种方法,本文直接给出实现代码和使用方法,需要的朋友可以参考下
    2015-02-02
  • JavaScript 中Date对象的格式化代码方法汇总

    JavaScript 中Date对象的格式化代码方法汇总

    JavaScript默认的时间格式我们一般情况下不会用,所以需要进行格式化,下面小编给大家带来了三种js date对象格式化实例代码,需要的朋友参考下吧
    2017-09-09
  • 用javascript关闭本窗口技巧小结

    用javascript关闭本窗口技巧小结

    window.close()是用来关闭窗口的,而且ie和firefox都是支持的,下面通过示例为大家介绍下用javascript关闭本窗口
    2014-09-09

最新评论