关于小程序 scroll-view 左右横向滑动没有效果(无法滑动)问题

小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经个人调试发现:

1.scroll-view 中的需要滑动的元素不可以用 float 浮动;

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

3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排;

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

具体的测试代码如下:

<view class="scroll_box"> 
    <scroll-view class="scroll-view_x" scroll-x style="width: auto;overflow:hidden;">

      <view class="item_list" bindtap="bookconIn" wx:for="{{list}}" wx:key="{{index}}">
        <image src="../../images/head.jpg" class="item_book_img" mode="aspectFill"></image>
        <view class="item_book_text">测试数据</view>
      </view>

    </scroll-view>
  </view>
var app = getApp()
Page({
  data: {
    list:[1,2,3,4,5]
  },

  onLoad: function () {
  },

  onShow: function () {
    },
})

得到的具体效果如下:

以上内容供学习总结分享与讨论,有什么不对的地方或可优化的地方,欢迎各位多多指教。

时间: 2024-07-30 20:26:09

关于小程序 scroll-view 左右横向滑动没有效果(无法滑动)问题的相关文章

关于小程序获取view的动态高度填坑

wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width height = rect.height top = rect.top }).exec() 如上,拿到了id为box的view,并获取到了它的宽.高等属性,此段代码要放在onReady函数中 注意:如果这个view的宽高是随着内容而变化的话,这样获取到的宽高就有可能还是渲染完成前的值,不知是不是小程序自己的

微信小程序将view动态填满全屏

一.在app.js利用官方方法获取设备信息 App({ onLaunch: function() { wx.getSystemInfo({ success: res => { this.globalData.systemInfo = res } }) }, globalData: { systemInfo: null } }) 获取到的windowWidth.windowHeight等度量单位为 px 二.在要使用的页面的js文件里将单位统一为rpx const app = getApp() P

关于小程序去除view/navigator 点击后默认阴影效果

hover:class  :定义容器在被触发时的样式 通常无用,但若不去除则影响用户体验: 为避免被覆盖,约定在wxss底部添加class,比如: <!-- wxml --> <navigator class="index-nav_box" hover-class="noshadow"> <image></image> <view class="index-nav-des">现采蓝莓1斤

微信小程序的view标签中text如何居中?

display:flex; align-items:center; justify-content:center; 原文地址:https://www.cnblogs.com/lsyy2017/p/11128497.html

微信小程序 解决 view 文字 过多 溢出的问题,超过行数后隐藏显示省略号

多行文本 .note_item text { display: -webkit-box; font-size: 28rpx; color: #000000; line-height: 40rpx; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } 单行文本 .note2_item text { displa

微信小程序-scroll-view横向滚动和上拉加载

今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方. 先看最终效果. 横向滚动 1.设置滚动项display:inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float 为什么会有以上三点要求呢? 其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧.所以才发现需要定义滚动项

微信小程序右到左联动

上一篇说了小程序的左到右的联动效果的实现,这个还不算太难,真正为难人的是右边滑动左边的选项对应切换的效果,咱今天就讲一下.话不多说先看效果. 右左联动.gif 一.关键技术: (1) 小程序 wxss 中使用 rpx,而 js 中 scrollTop 获取到的值是 px,所以存在rpx 转 px 的问题.以 iPhone6 为基准,转换公式: // percent 为当前设备1rpx对应的px值 var percent = res.windowWidth / 750; 详情参考:WXSS尺寸单位

微信小程序简要学习(二)

小程序的flex布局 view 视图容器. 属性名 类型 默认值 说明 最低版本 hover-class String none 指定按下去的样式类.当 hover-class="none" 时,没有点击态效果   hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0 hover-start-time Number 50 按住后多久出现点击态,单位毫秒   hover-stay-time Number 400 手指

微信小程序实现左滑删除源码

左滑删除效果在app的交互方式中十分流行,比如全民应用微信 微信左滑删除 再比如曾引起很大反响的效率app Clear Clear左滑删除 从技术上来说,实现这个效果并不困难,响应一下滑动操作,移动一下组件,再加上些坐标计算,状态记录就可以了.也有一些文章介绍了在小程序上如何实现这一效果,不过我基本可以确定这些开发者没有在真机上详细测试,因为经我实践发现,在小程序上想要完美实现这个效果几乎是不可能完成的任务. 这一切要从小程序的事件机制说起.对于滑动类操作,小程序提供了bind和catch两种响

一个小时快速搭建微信小程序

「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的是微信这两天发布了正式版开发者工具,无需内测邀请也可以尝鲜了. 因此也就有了我与「小程序」的初体验,而我的感受只有一个字--爽! 选择哪个「小程序」Demo? 在知名同性交友网站 Github 上,「小程序」的 Demo 不少,但是大多只是简单的 API 演示,有的甚至直接把页面数据写在了 json