微信小程序 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 相关文章推荐
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
JS跨域问题详解
Nov 25 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
简述vue中的config配置
Jan 23 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 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
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
php中filter_input函数用法分析
2014/11/15 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
vue router demo详解
2017/10/13 Javascript
vue写一个组件
2018/04/09 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
Python函数嵌套实例
2014/09/23 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
python看某个模块的版本方法
2018/10/16 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
django框架auth模块用法实例详解
2019/12/10 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
团支部建设方案
2014/05/02 职场文书
应届大学生自荐书
2014/06/17 职场文书
离婚协议书范本样本
2014/08/19 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
运动会通讯稿600字
2015/07/20 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android