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

scroll-view为滚动视图,分为水平滚动和垂直滚动,这篇文章主要给大家介绍了关于微信小程序scroll-view不能左右滑动问题的解决方法,需要的朋友可以参考下

微信小程序scroll?view不能左右滑动问题的解决方法,恰卡网带你了解更多相关信息。

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

问题:

在小程序页面布局的时候用到了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左右滑动内容请搜索趣讯吧以前的文章或继续浏览下面的相关文章希望大家以后多多支持趣讯吧!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 55@qq.com 举报,一经查实,本站将立刻删除。转转请注明出处:https://www.szhjjp.com/n/2124.html

(0)
nan
上一篇 2021-07-10
下一篇 2021-07-10

相关推荐

  • 精选热门好书姜初九陆暝-姜初九陆暝(穿成反派暴君的心尖宠)全文无删减版在线阅读

    姜初九乖乖照做,抬起头之后,下意识的看了一眼陆暝,却对上了一双深邃幽冷,带着邪气的眸子。漆黑狂傲,不怒自威,就好似这个人,生来就该是帝王一般。只一眼,姜初九便匆匆的垂下眼眸。

    网络资讯 2023-05-30
    0
  • 2024广州龙年金银纪念币和普通纪念币有哪些区别

    1、材质普通纪念币包括普通金属纪念币和纪念钞,材质是铸造普通硬币的金属和用于印制钞票的纸张(或专用特制材料)。贵金属纪念币包括金币、银币和铂、钯等贵金属铸造的纪念币,材质是金、银等贵金属。2、面额和流通性普通纪念币的面额表明其法定价值,与现行流通人民币职能相同,与同面额人民币等值流通。贵金属纪念币不能兑换,也不参与流通,其面额是法定货币的象征性货币符号,并不代表其真

    2023-12-14
    0
  • 宁夏大学怎么样,宁夏大学2023录取线

    宁夏大学是宁夏回族自治区人民政府与教育部共建的地方综合性大学。学校始建于1958年。1997年底,与宁夏工学院、银川师专(含宁夏教育学院)合并;2002年2月,又与宁夏农学院合并,组建新的宁夏大学。学校现有三个校区,校园占地面积2351亩,校舍建筑面积58.1万平方米。在校教职工2600余人,其中50%为专任教师。专任教师中高级职称达50%,硕士以上学历达52%,享受国务院特殊津贴15人,入选“国

    2023-08-23 知识
    0
  • misswhite怎么读英语

    Misswhite怎么读英语Misswhite是一个英文名字,它的拼写为Misswhite,按照英语的发音规则,Misswhite怎么读英语呢?一、Misswhite的发音Misswhite是一个英文名字,它的发音是英式发音,具体发音为:/ˈmɪswaɪt/。其中,Miss的发音为/mɪs/,white的发音为/waɪt/。二、Misswhite的含义Misswhite是一个英文名字,它

    2023-11-30
    0
  • 冲凉房冷热水龙头漏水怎么修(冷热水龙头漏水怎么修)

    大家好,相信大家对冲凉房冷热水龙头漏水怎么修,冷热水龙头漏水怎么修的问题都很疑惑,这个问题很多人还不知道怎么解决,现在让我们一起来学习学习吧!一、冷热水龙头漏水怎么修1、找到开关把手下方红蓝标签,然后用工具将该标签取下,这样就能看到固定龙头把手的螺丝。2、用合适的工具将螺丝拧松并取下,接着再将把手拆卸下来,就可以看到内部的阀门和垫片。3、检查垫片使用情况,若已损坏,需要更换新的,若只是位置不对,只

    2023-10-13
    0
  • 简璃陆砚行小说最新章节-简璃陆砚行免费阅读

    他记得今天是陪着少爷来抓人的,来的时候气势汹汹,有那种黑老大灭门的味道了,但是此时一看,这个黑老大跪在人家小姑娘面前,抓着人家的脚不放,像个痴汉一样……无语啊!还有些丢人!而且两人中间隔着一个铁门,搞得像是在探监似的,怪异,太怪异了!

    网络资讯 2023-05-01
    0

发表回复

登录后才能评论