微信小程序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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
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
菜鸟学PHP之Smarty入门
2007/01/04 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
JavaScript实现图片放大镜效果
2019/06/27 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
Python编程中的反模式实例分析
2014/12/08 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python 定时修改数据库的示例代码
2018/04/08 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
学习经验交流会主持词
2014/04/01 职场文书
拉拉队口号
2014/06/16 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
python实现Nao机器人的单目测距
2021/09/04 Python
mysql如何能有效防止删库跑路
2021/10/05 MySQL