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

news/2024/7/20 0:47:28 标签: 小程序, javascript, scrollview, 隐藏滚动条

文章转载自:https://blog.csdn.net/qq_24734285/article/details/53912799

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

最后,根据网友“夸克逃逸”的提醒,强调一下最主要的代码是wxss里的这行:

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

 


http://www.niftyadmin.cn/n/1301289.html

相关文章

CocosCreator Animation总结

Animation的编辑动画、帧事件、脚本控制动画等这些就不说了这里有&#xff1a;https://docs.cocos.com/creator/manual/zh/animation/ 现在说一下这里的坑&#xff1a; 之前和美术同学对接&#xff0c;发现Animation有些坑也是需要欢迎大家来跨坑的&#xff0c;在这里总结两个…

微信小游戏分享闭环总结

在小游戏开发中&#xff0c;会有这样的需求&#xff1a; 当你分享了小游戏后&#xff0c;点击分享入口的小伙伴能获取到一些信息&#xff0c;来展示自己分享的独特的信息。 这种功能在微信的接口中已经有集成&#xff0c;实现该功能的接口主要有两个&#xff1a; 一&#xf…

css菜鸡的自我救赎

css菜鸡的自我救赎 0. 前言 作为一个不喜欢写样式的前端&#xff0c;遇到了直接对外的活动页面的需求&#xff0c;一下炸出一堆问题&#xff1a; 单位乱用&#xff0c;rem、vh、vw、px乱用甚至混在一起用html冗余&#xff0c;有时候一个div只是为了取margin一个页面用多种布…

js中return;return true return false 的区别

return 定义: return 语句会 终止函数的执行 并 返回函数的值。 注意这两个&#xff1a; 1.终止函数的执行 2.返回函数的值 返回函数的值这里就不过多叙述了&#xff0c;就是 return 变量 先看下面的例子&#xff1a; <!DOCTYPE html> <html> <head><…

git配置用户名

文章转载自&#xff1a;https://baijiahao.baidu.com/s?id1584822842322017698&wfrspider&forpc 在公司闲暇的时间想自己搞点自己喜欢的小项目&#xff0c;就用到了github&#xff0c;公司本身有自己的gitlab&#xff0c;结果使用github的时候发现上传的用户是gitlab…

CocosCreator用git版本控制时meta文件的冲突解决方法

我们在多人进行CocosCreator开发时&#xff0c;需要对CCC的meta文件进行提交。 meta文件里有CCC编辑器唯一识别的uuid&#xff0c;这个uuid是CCC编辑器对文件识别的唯一标识。 如果我们不提交&#xff0c;会造成各个程序员电脑之间的CCC自动生成的uuid不一样&#xff0c;这样…

Vue开发库存管理前端页面时一些小经验记录

场景是在项目中很多地方都需要用到相同的函数&#xff0c;例如 this.$message({type: success,message: 提示语 })如果出现次数过多&#xff0c;会造成书写麻烦和代码复杂的情况。 解决思路&#xff1a;首先对函数进行抽象封装&#xff0c;封装后利用vue的mixin将其注入到各个…

vue axios数据请求get、post方法的使用

我们常用的有get方法以及post方法&#xff0c;下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入的方法&#xff0c;哪个页面需要请求数据就在哪个页面里引入一下。 import axios from ‘axios’…