支付宝小程序组件 视图容器·view

2020-09-18 10:47 更新

视图容器。相当于 web 的 div 或者 react-native 的 view。如果需要使用滚动视图,请使用 scroll-view。不支持 view 组件覆盖 map 组件,可通过同层渲染实现 cover-view 覆盖 map 组件

扫码体验

示例代码

<!-- API-DEMO page/component/view.axml -->
<view class="page">
  <view>
    <button a:if="{{returnIndex}}" onTap="returnIndex">回到首页</button>
  </view>
  <view class="page-description">视图容器,相当于 web 的 div 或者 react-native 的 View。</view>
  <view class="page-section">
    <view class="page-section-demo">
      <view class="stream">
        <view class="post">
          <view class="postUser">
            <view class="postUser__name">Chris</view>
          </view>
          <view class="postBody">
            <view class="postBody__content">
              欢迎使用支付宝小程序!!!
            </view>
            <view class="postBody__date">
              May 20
            </view>
          </view>
        </view>


        <view class="post">
          <view class="postUser">
            <view class="postUser__name">Jack</view>
          </view>
          <view class="postBody">
            <view class="postBody__content">
              @Chris 我该如何上手?
            </view>
            <view class="postBody__date">
              May 21
            </view>
          </view>
        </view>


        <view class="post">
          <view class="postUser">
            <view class="postUser__name">Chris</view>
          </view>
          <view class="postBody">
            <view class="postBody__content">
              你可以查看 Demo,对小程序有一个简单的了解;然后下载我们的 IDE 进行开发。
            </view>
            <view class="postBody__date">
              May 22
            </view>
          </view>
        </view>


        <view class="post">
          <view class="postUser">
            <view class="postUser__name">Jessie</view>
          </view>
          <!-- hover red -->
          <view class="postBody" hover-class="red">
            <view class="postBody__content">
              赞!
            </view>
            <view class="postBody__date" hidden>
              June 1
            </view>
          </view>
        </view>


        <view class="post" hidden>
          <view class="postUser">
            <view class="postUser__name">Jessie</view>
          </view>
          <view class="postBody">
            <view class="postBody__content">
              赞! +1
            </view>
            <view class="postBody__date">
              June 1
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
// API-DEMO page/component/view.js
Page({
  data: {
    pageName: 'component/view',
  },
  onLoad() {
    this.setData({
      returnIndex: getCurrentPages().length === 1,
    })
  },
  returnIndex() {
    my.switchTab({ url: '/page/component/index' });
  },
});
/* API-DEMO page/component/view.acss */
.post + .post {
  margin-top: 10rpx;
}
.post {
  display: flex;
}
.postUser {
  flex: 0 1 auto;
  padding-bottom: 20rpx;
}
.postUser__name {
  width: 180rpx;
  color: #57727C;
  font-size: 24rpx;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  margin-top: 60rpx;
}
.postBody {
  flex: 1 1 0%;
  position: relative;
  padding: 30rpx;
  border: 2rpx solid #CAD0D2;
  border-radius: 8rpx;
}
.postBody:after,
.postBody:before {
  right: 100%;
  top: 70rpx;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.postBody:after {
  border-color: transparent;
  border-right-color: #ffffff;
  border-width: 16rpx;
  margin-top: -16rpx;
}
.postBody:before {
  border-color: transparent;
  border-right-color: #CAD0D2;
  border-width: 18rpx;
  margin-top: -18rpx;
}
.postBody__content {
  color: #57727C;
  font-size: 24rpx;
}
.postBody__date {
  margin-top: 10rpx;
  color: #86969C;
  font-size: 20rpx;
  text-transform: uppercase;
  letter-spacing: 2rpx;
}

属性

属性名 类型 默认值 描述 最低版本
disable-scroll Boolean false 是否阻止区域内滚动页面。说明:如果 view 中嵌套 view,外层 view 设置 disable-scroll 为 true 时禁止内部的滚动。 -
hover-class String - 触摸时添加的样式类。 -
hover-start-time Number - 按住多久后出现点击状态,单位毫秒。 -
hover-stay-time Number - 松开后点击状态保留时间,单位毫秒。 -
hidden Boolean false 是否隐藏。 -
class String - 自定义样式名。 -
style String - 内联样式。 -
animation Object {} 用于动画,详见 my.createAnimation。使用 my.createAnimation 生成的动画是通过过渡(Transition)实现的,只会触发 onTransitionEnd,不会触发 onAnimationStartonAnimationIterationonAnimationEnd -
hover-stop-propagation Boolean false 是否阻止当前元素的祖先元素出现点击态。 1.10.0
onTap EventHandle - 点击。 -
onTouchStart EventHandle - 触摸动作开始。 -
onTouchMove EventHandle - 触摸后移动。 -
onTouchEnd EventHandle - 触摸动作结束。 -
onTouchCancel EventHandle - 触摸动作被打断,如来电提醒,弹窗。 -
onLongTap EventHandle - 长按 500ms 之后触发,触发了长按事件后进行移动将不会触发屏幕的滚动。 -
onTransitionEnd EventHandle - 过渡(Transition)结束时触发。 1.8.0
onAnimationIteration EventHandle - 每开启一次新的动画过程时触发。(第一次不触发) 1.8.0
onAnimationStart EventHandle - 动画开始时触发。 1.8.0
onAnimationEnd EventHandle - 动画结束时触发。 1.8.0
onAppear EventHandle - 当前元素可见面积超过50%时触发。 1.9.0
onDisappear EventHandle - 当前元素不可见面积超过50%时触发。 1.9.0
onFirstAppear EventHandle - 当前元素首次可见面积达到50%时触发。 1.9.4
role - - 表示组件的语义角色。设置为 img 时,组件聚焦后读屏软件会朗读出 图像 ;设置为 button 时,聚焦后读屏软件会朗读出 按钮 。详情请参见 aria-component -

常见问题

如何改变 view 的展示顺序?

将这两个模块嵌入到一个循环里面,每一个循环的小模块加一个类型值进行标识。

页面滚动时在不同屏幕滚动到的位置不同,如何解决?

  1. 按照屏幕的比例计算,换算跳转位置 。
  2. 固定一个滑动位置,在该位置写入一个 view,通过计算这个 view 到顶部距离,进行跳转。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号