zoukankan      html  css  js  c++  java
  • 微信小程序 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;

    具体的测试代码如下

    <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;
       auto;
      overflow: hidden;
      white-space: nowrap;
    }
    .hot-good{
       260rpx;
      display: inline-block;
      margin: 0 20rpx;
      font-size: 24rpx;
    }
  • 相关阅读:
    17-vue-cli脚手架安装和webpack-simple模板项目生成
    15-其它
    14-表单输入绑定
    k8s组件通信或者创建pod生命周期
    升级CentOS 7.4内核版本--升级到最新
    Linux
    Statefulset的拓扑状态
    nginx浏览器开启密码验证
    为什么我们需要Pod?(容器设计模式sidecar)
    mysql内存优化
  • 原文地址:https://www.cnblogs.com/duanzb/p/10255044.html
Copyright © 2011-2022 走看看