微信小程序scroll-view不能左右滑动问题的解决方法


Posted in Javascript onJuly 09, 2021

最近在做自己小程序项目。因为并非专业前端 。所以一步一掉坑。在这里想着把遇到的问题总结一下。避免重复进坑。

问题:

    在小程序页面布局的时候用到了scroll-view组件,发现横向移动没有效果。在网上查阅了一下资料发现问题所在。

我的wxml代码

<scroll-view scroll-x="true" class="scroll" bindscrolltolower="lower" bindscroll="scroll">
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">张三</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">张三</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">张三</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">张三</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">张三</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">张三</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">张三</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">张三</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">张三</view>
        </view>
       

      </scroll-view>

wxss代码

.enroll_view .scroll_view .scroll{
  height:160rpx;
  width:750rpx;
  overflow: hidden;
}
.user_info{
  float:left;
  margin-top:10rpx;
  height:140rpx;
  width:140rpx;
}

想法很简单,想用float:left;让需要滑动的元素横向排列。经过查阅资料发现需要滑动的元素不能使用float浮动。为实现此效果需要使用display:inline-block;来实现。

继续改(删掉float:left;.用display:inline-block;实现子元素横向排列效果)

wxss样式

.user_info{
  margin-top:10rpx;
  height:140rpx;
  width:140rpx;
  display: inline-block;
}

改是改完了发现不能用还是不能用。而且发现是因为子集元素超过宽度后就换行了。

所以给scroll-view添加white-space: nowrap;不让其内部元素换行。刷新。实现最终效果。开森。效果图

微信小程序scroll-view不能左右滑动问题的解决方法

最终版wxss

.enroll_view .scroll_view .scroll{
  height:160rpx;
  width:750rpx;
  overflow: hidden;
  white-space: nowrap;
}
.user_info{
  margin-top:10rpx;
  height:140rpx;
  width:140rpx;
  display: inline-block;
}

    1.scroll-view 中的需要滑动的元素为实现横向排列效果不可使用不 float 浮动,可以用display:inline-block;将其改为行内块元素;

  2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的;

  3.包裹 scroll-view 的大盒子有明确的宽和加上样式white-space:nowrap;

附scroll-view主要属性:

微信小程序scroll-view不能左右滑动问题的解决方法

总结

到此这篇关于微信小程序scroll-view不能左右滑动问题的解决方法的文章就介绍到这了,更多相关微信小程序scroll-view左右滑动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 Javascript
jquery构造器的实现代码小结
May 16 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
Vue Element-ui表单校验规则实现
Jul 09 #Vue.js
JavaScript数组reduce()方法的语法与实例解析
Jul 07 #Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 #Vue.js
Vue项目打包、合并及压缩优化网页响应速度
教你使用vscode 搭建react-native开发环境
idea编译器vue缩进报错问题场景分析
jQuery实现广告显示和隐藏动画
You might like
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
PHP中的float类型使用说明
2010/07/27 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
Python中关于字符串对象的一些基础知识
2015/04/08 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
电信营业员自我评价分享
2014/01/17 职场文书
初中政治教学反思
2014/01/17 职场文书
保洁员岗位职责
2015/02/04 职场文书
缅怀先烈主题班会
2015/08/14 职场文书