小程序开发-视图容器movable-view和movable-area

最新推荐文章于 2025-07-15 14:18:38 发布

原创

最新推荐文章于 2025-07-15 14:18:38 发布 · 672 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#视图容器

本文介绍了如何在小程序中利用movable-view和movable-area组件来创建一个可滑动的窗口。通过.wxml、.wxss和.js代码展示实现过程，并强调了如果不使用movable-area，movable-view将失去滑动功能及其在flex布局中的影响。同时，提到了movable-view属性的设置技巧，如宽度、高度的设定以及布尔属性的简洁写法。

一、需求：实现可以滑动的窗口

二、代码

.wxml

<!-- 秒杀 -->
  <view class='u-wrp-secKill'>
    <view class='u-wrp-secKillHead'>
      <text class="u-txt-skTitle">京东秒杀</text>
      <text class="u-txt-sktime">18点场</text>
    </view>
    <movable-area style='width:auto'>
      <movable-view animation scroll-x style='height:220rpx;width:1280rpx' direction='horizontal' inertia='true' out-of-bounds>
      <block wx:for='{
  
  {skItems}}'>
        <view class='u-img-skimgs'>
          <image src='{
  
  {item.pic}}' class='u-img-skimgItem'></image>
          <text class='u-txt-sktxtItem1'>{
  
  {item.pNew}}</text>
          <text class='u-txt-sktxtItem2'>{
  
  {item.pOld}}</text>
        </view>
      </bloc