微信小程序 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 性能优化指南 (1)
May 21 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 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程序时遇到的三个问题
2012/01/17 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
jquery创建div 实现代码
2009/04/27 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
PHP PDO操作总结
2014/11/17 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
vue ssr 指南详读
2018/06/29 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
pyspark 随机森林的实现
2020/04/24 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
环保倡议书怎么写
2014/05/16 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
Js类的构建与继承案例详解
2021/09/15 Javascript