欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2020-10-20 13:32:55|栏目:JavaScript代码|点击:

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: '玻璃?5?',
    desc: '22W人去?^'
   }, {
    pic: '/images/example2.png',
    title: '玻璃?5?',
    desc: '22W人去?^'
   }, {
    pic: '/images/example2.png',
    title: '玻璃?5?',
    desc: '22W人去?^'
   }, {
    pic: '/images/example2.png',
    title: '玻璃?5?',
    desc: '22W人去?^'
   }, {
    pic: '/images/example2.png',
    title: '玻璃?5?',
    desc: '22W人去?^'
   }
  ]
 }

上一篇:MVVM模式中ViewModel和View、Model有什么区别?

栏    目:JavaScript代码

下一篇:JavaScript实现设置默认日期范围为最近40天的方法分析

本文标题:微信小程序-横向滑动scroll-view隐藏滚动条

本文地址:http://www.codeinn.net/misctech/14016.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有