微信小程序 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语言中的Literal Syntax特性分析
Mar 08 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
解决Layui 表格自适应高度的问题
Nov 15 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中进行身份认证
2006/10/09 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
Python文件读写保存操作的示例代码
2018/09/14 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Python中Qslider控件实操详解
2021/02/20 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
助理政工师申报材料
2014/06/03 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
springcloud之Feign超时问题的解决
2021/06/24 Java/Android