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;
    }
  • 相关阅读:
    Java内存回收机制
    Java并发编程-synchronized指南
    Java Servlet完全教程
    Java线程池的那些事
    Java 代码性能优化总结
    Java开发必会的Linux命令
    Java多线程问题总结
    Redis 学习笔记续
    Redis 学习笔记
    Nginx配置文件详解
  • 原文地址:https://www.cnblogs.com/duanzb/p/10255044.html
Copyright © 2011-2022 走看看