微信小程序 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&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
vue生命周期实例小结
Aug 15 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
微信小程序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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
python中偏函数partial用法实例分析
2015/07/08 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
外贸员简历中的自我评价
2014/03/04 职场文书
党员创先争优承诺书
2014/03/26 职场文书
本科生就业推荐信
2014/05/19 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
婚礼答谢词
2015/01/04 职场文书
寒山寺导游词
2015/02/03 职场文书
2016新年慰问信范文
2015/03/25 职场文书
关于观后感的作文
2015/06/18 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
责任书格式
2019/04/18 职场文书
Python进度条的使用
2021/05/17 Python