微信小程序 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 相关文章推荐
编写兼容IE和FireFox的脚本
May 18 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
小程序自定义弹框效果
Nov 16 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
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
四川成都导游欢迎词
2014/01/18 职场文书
竞赛口号大全
2014/06/16 职场文书
家属答谢词
2015/01/05 职场文书
《打电话》教学反思
2016/02/22 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python