小程序组件 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;

具体的测试代码如下

<scroll-view scroll-x class='hot-list graybg'>
<view class='hot-good' wx:for="{{hotlist}}">
<image class='backwhite' src='{{item.pic}}'></image>
<view class='overhiddent graybg' style='padding:18rpx 0 6rpx 0;'>{{item.name}}</view>
<view class='red graybg'>{{item.showPrice}}/天</view>
</view>
</scroll-view> .hot-list{
padding: 20rpx 0rpx;
width: auto;
overflow: hidden;
white-space: nowrap;
}
.hot-good{
width: 260rpx;
display: inline-block;
margin: 0 20rpx;
font-size: 24rpx;
}

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

  1. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  2. 微信小程序-自定义菜单导航(实现楼梯效果)

    设计初衷 在开发页面时,往往需要实现,点击页面的导航菜单页面滚动到相应位置,滚动页面实现菜单选项的高亮.在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果.在框架中vant U ...

  3. 微信小程序之实现页面缩放式侧滑效果

    效果图: 实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class. 由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点. 1.结构 ...

  4. 关于微信小程序获取view的动态高度填坑

    wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...

  5. 微信小程序scroll标签的测试

    一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...

  6. 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置

    1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...

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

    一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ ...

  8. 微信小程序(三)页面跳转和图片滑动切换

    跳转部分: 在index2.wxml中,添加跳转函数,如下所示:

  9. 微信小程序滚动到某个位置添加class效果。

    <scroll-view scroll-y="true" style="height:100vh;" bindscrolltoupper="up ...

  10. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

随机推荐

  1. Selenium3+python自动化014-自动化常用设计模式页面对象模型 (Page Object)

    一.概 念: PO(Page Object)设计模式是一种面向对象(页面对象)的设计模式,将测试对象及单个的测试步骤封装在每个Page对象中,以page为单位进行管理. 二.优点可以使代码复用,降低维 ...

  2. 安卓android eclipse运行提示no compatible targets were found

    在eclipse中开发安卓应用,运行项目时,右击项目名称---Run As---Android Application时, 系统提示"No compatible targets were f ...

  3. 0级搭建类009-Fedora 30 安装(F30) 公开

    项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...

  4. 第一个,net core项目,一起入门 !!!

    最近项目上开始使用.net core,新的项目,熟悉的东西比较多,现在花点时间来梳理一下,重头开始搭建一个.net core项目.哈哈,这个相对老手来说,估计会觉得小儿科,没事,也就当一次分享总结罢了 ...

  5. css实现聊天气泡效果

      --------------------------------------- css功能强大,能实现很多炫 酷的效果,今天给大家分享 用css3绘制聊天气泡的方法: -------------- ...

  6. ms17-010 利用msf的exp和一个扫描工具的复现

    0x01简介 永恒之蓝漏洞是方程式组织在其漏洞利用框架中一个针对SMB服务进行攻击的漏洞,该漏洞导致攻击者在目标系统上可以执行任意代码. 攻击对象:win7及win7以下的操作系统且开启了445端口s ...

  7. 如何在K3查找BOS单据在哪个子系统中

    select FFunctionID,* from ICClassType where FName_CHS like '%采购订单%'select FSubSysID,* from t_DataFlo ...

  8. AtCoder Beginner Contest 154 题解

    人生第一场 AtCoder,纪念一下 话说年后的 AtCoder 比赛怎么这么少啊(大雾 AtCoder Beginner Contest 154 题解 A - Remaining Balls We ...

  9. IntelliJ IDEA 2019.1.3 最新破解教程【最强 可用至2099年】

    本文包括最新[2019.1.2]安装 和[2018.3.2](推荐)安装 ①IntelliJ IDEA 2018.3.2安装永久安装[最强]  一. 在官网下载IDEA安装包  链接:https:// ...

  10. Opencv之像素值的获取

    灰度图像${\rm{M}} \times {\rm{N}}$的像素矩阵值为0~255,像素值越大越亮.${{\rm{I}}_{{\rm{i}}{\rm{j}}}}$,i表示行的位置,j 表示列的位置即 ...