view 视图容器

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

扫码体验

image.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

是否阻止当前元素的祖先元素出现点击态

onTap

EventHandle

-

点击

onTouchStart

EventHandle

-

触摸动作开始

onTouchMove

EventHandle

-

触摸后移动

onTouchEnd

EventHandle

-

触摸动作结束

onTouchCancel

EventHandle

-

触摸动作被打断,如来电提醒,弹窗

onLongTap

EventHandle

-

长按 500ms 之后触发,触发了长按事件后进行移动将不会触发屏幕的滚动

onTransitionEnd

EventHandle

-

过渡(Transition)结束时触发

onAnimationIteration

EventHandle

-

每开启一次新的动画过程时触发。(第一次不触发)

onAnimationStart

EventHandle

-

动画开始时触发

onAnimationEnd

EventHandle

-

动画结束时触发

onAppear

EventHandle

-

当前元素可见时触发。

onDisappear

EventHandle

-

当view标签隐藏到2/3时会触发。

onFirstAppear

EventHandle

-

当前元素首次可见时触发。

role

-

-

表示组件的语义角色。设置为 img 时,组件聚焦后读屏软件会朗读出

图像

;设置为 button 时,聚焦后读屏软件会朗读出

按钮

常见问题

如何改变 view 的展示顺序?

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

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

1.按照屏幕的比例计算,换算跳转位置 。

2.固定一个滑动位置,在该位置写入一个 view,通过计算这个 view 到顶部距离,进行跳转。