微信小程序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 相关文章推荐
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
JS之相等操作符详解
Sep 13 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 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 数组的创建、调用和更新实现代码
2009/03/09 PHP
php 结果集的分页实现代码
2009/03/10 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
jquery select下拉框操作的一些说明
2010/04/02 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
python中对_init_的理解及实例解析
2019/10/11 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
如何使用python写截屏小工具
2020/09/29 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
企业安全生产演讲稿
2014/05/09 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
护理专业自荐信范文
2015/03/06 职场文书
小学生教师节广播稿
2015/08/19 职场文书
《灰雀》教学反思
2016/02/19 职场文书