微信小程序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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
vue 登录滑动验证实现代码
Aug 24 Javascript
php结合js实现多条件组合查询
May 28 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
vue判断按钮是否可以点击
Apr 09 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/10/06 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
解析php中反射的应用
2013/06/18 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
php格式化时间戳
2016/12/17 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
Three.js快速入门教程
2016/09/09 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
python图片验证码生成代码
2016/07/02 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
大学生评语大全
2014/04/18 职场文书
经营理念口号
2014/06/21 职场文书
服务标语口号
2014/07/01 职场文书
档案工作个人总结
2015/03/03 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
如何撰写促销方案?
2019/07/05 职场文书