微信小程序 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 相关文章推荐
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
JS 有名函数表达式全面解析
Mar 19 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
原生js实现each方法实例代码详解
May 27 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&amp;mysql 日期操作小记
2012/02/27 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
python解析xml文件实例分享
2013/12/04 Python
python中的多线程实例教程
2014/08/27 Python
python 实时遍历日志文件
2016/04/12 Python
解决Django中多条件查询的问题
2019/07/18 Python
python 函数中的参数类型
2020/02/11 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
承认错误的检讨书
2014/01/30 职场文书
电气个人求职信范文
2014/02/04 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
课外活动总结
2015/02/04 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
vue实现在data里引入相对路径
2022/06/05 Vue.js