微信小程序 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学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
ES6新特性之模块Module用法详解
Apr 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
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
理解Javascript闭包
2013/11/01 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
python3中的md5加密实例
2018/05/29 Python
python中数据库like模糊查询方式
2020/03/02 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
python中二分查找法的实现方法
2020/12/06 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
进口业务员岗位职责
2014/04/06 职场文书
大型营销活动计划书
2014/04/28 职场文书
完美的中文自荐信
2014/05/24 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
《学会看病》教学反思
2016/02/17 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript