• 下载
  • 社区

view 视图容器

视图容器。相当于 web 的 div 或者 react-native 的 view。如果需要使用滚动视图,请使用 scroll-view

扫码体验

img.jpg

效果示例

view.png

示例代码

<!-- 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,不会触发 onAnimationStart, onAnimationIteration, onAnimationEnd -
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 - 当前元素可见时触发。 1.9.0
onDisappear EventHandle - 当view标签隐藏到2/3时会触发。 1.9.0
onFirstAppear EventHandle - 当前元素首次可见时触发。 1.9.4

常见问题

如何改变 view 的展示顺序?

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

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

1.按照屏幕的比例计算,换算跳转位置 。
2.固定一个滑动位置,在该位置写入一个 view,通过计算这个 view 到顶部距离,进行跳转。