微信小程序 scroll-view 水平滚动实现过程解析


Posted in Javascript onOctober 12, 2019

1. scroll-view水平滚动使用

1. wxml

<scroll-view class="scroll-wrap" scroll-x>
   <view class="scroll-view-item">
    <view class="scroll-img-wrap scroll-major-img-wrap">
     <image src="../../images/wukecheng@2x.png" class="img-responsive" />
    </view>
    <text class="scroll-title scroll-major-title">膳食与营养膳食与营养膳食...</text>
   </view>
   <view class="scroll-view-item">
    <view class="scroll-img-wrap scroll-major-img-wrap">
     <image src="../../images/wukecheng@2x.png" class="img-responsive" />
    </view>
    <text class="scroll-title scroll-major-title">膳食与营养膳食与营养膳食...</text>
   </view>
   <view class="scroll-view-item">
    <view class="scroll-img-wrap scroll-major-img-wrap">
     <image src="../../images/wukecheng@2x.png" class="img-responsive" />
    </view>
    <text class="scroll-title scroll-major-title">膳食与营养膳食与营养膳食...</text>
   </view>
   <view class="scroll-view-item">
    <view class="scroll-img-wrap scroll-major-img-wrap">
     <image src="../../images/wukecheng@2x.png" class="img-responsive" />
    </view>
    <text class="scroll-title scroll-major-title">膳食与营养膳食与营养膳食...</text>
   </view>
  </scroll-view>

2. wxss

.scroll-wrap {
 min-width: 100%;
 height: 360rpx;
 white-space: nowrap; /*不可缺少*/
}
.scroll-view-item {
 width: 68%;
 height: 360rpx;
 display: inline-block; // 可以使每一项水平排列
}
.scroll-view-item + .scroll-view-item {
 margin-left: 16rpx;
}
::-webkit-scrollbar{ // 隐藏滚动条
  width: 0;
  height: 0;
  color: transparent;
}
 .scroll-img-wrap {
 width: 100%;
 height: 280rpx;
 overflow: hidden;
 border-radius: 8rpx;
}
.scroll-title {
  white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 display: block;
}
.scroll-major-img-wrap {
 height: 280rpx;
}
.scroll-major-title {
 margin: 16rpx 8rpx;
}

2. scroll-view 隐藏滚动条

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

3. 效果如下:

微信小程序 scroll-view 水平滚动实现过程解析

微信小程序 scroll-view 水平滚动实现过程解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
Vue常用指令详解分析
Aug 19 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 #Javascript
vue中添加与删除关键字搜索功能
Oct 12 #Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 #jQuery
jquery 时间戳转日期过程详解
Oct 12 #jQuery
JS数组splice操作实例分析
Oct 12 #Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 #Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 #Javascript
You might like
番茄的表单验证类代码修改版
2008/07/18 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python分析apache访问日志脚本分享
2015/02/26 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
python3音乐播放器简单实现代码
2020/04/20 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
Python如何实现强制数据类型转换
2019/11/22 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
Python实现AI换脸功能
2020/04/10 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
校友会欢迎辞
2014/01/13 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
求职自荐信怎么写
2014/03/06 职场文书
党务公开方案
2014/05/06 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
python神经网络 使用Keras构建RNN训练
2022/05/04 Python
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis