原生小程序开发组件｜视图容器组件汇总（一）

view

视图容器

属性说明

属性	类型	默认值	必填	说明	备注
hover-class	string	none	否	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒

示例代码

TYML

<view class="page-head">
	<view class="page-head-title">view</view>
	<view class="page-head-line"></view>
</view>
 
<view class="page-section">
  <view class="page-section-title l-r-padding">
    <view>flex-direction: row</view>
    <view>横向布局</view>
  </view>
  <view class="flex-wrp" style="flex-direction:row;justify-content: center;">
    <view class="flex-item demo-text-1">A</view>
    <view class="flex-item demo-text-2">B</view>
    <view class="flex-item demo-text-3">C</view>
  </view>
</view>
 
<view class="page-section">
  <view class="page-section-title l-r-padding">
    <view>flex-direction: column</view>
    <view>纵向布局</view>
  </view>
  <view class="flex-wrp" style="flex-direction:column;">
    <view class="flex-item flex-item-V demo-text-1">A</view>
    <view class="flex-item flex-item-V demo-text-2">B</view>
    <view class="flex-item flex-item-V demo-text-3">C</view>
  </view>
</view>

 

scroll-view

可滚动视图区域，可实现横向滚动和竖向滚动。使用竖向滚动时，需要给定一个固定高度，可以通过样式来设置 height。组件属性的长度单位支持 px 和 rpx。

属性说明

属性	类型	默认值	必填	说明	备注
scroll-x	boolean	false	否	允许横向滚动
scroll-y	boolean	false	否	允许纵向滚动
upper-threshold	number/string	50	否	距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold	number/string	50	否	距底部/右边多远时，触发 scrolltolower 事件
scroll-top	number/string		否	设置竖向滚动条位置
scroll-left	number/string		否	设置横向滚动条位置
scroll-into-view	string		否	值应为某子元素 id（id 不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	boolean	false	否	在设置滚动条位置时使用动画过渡
refresher-enabled	boolean	false	否	开启自定义下拉刷新
refresher-threshold	number	45	否	设置自定义下拉刷新阈值
refresher-default-style	string	"black"	否	设置自定义下拉刷新默认样式，支持设置 black、white、none， none 表示不使用默认样式
refresher-background	string	"#FFF"	否	设置自定义下拉刷新区域背景颜色
refresher-triggered	boolean	false	否	设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
bind:scroll	eventhandle	--	否	滚动时触
bind:scrolltoupper	eventhandle	--	否	滚动到顶部/左边时触发
bind:scrolltolower	eventhandle	--	否	滚动到底部/右边时触发
bind:refresherpulling	eventhandle	--	否	自定义下拉刷新控件被下拉
bind:refresherrefresh	eventhandle	--	否	自定义下拉刷新被触发
bind:refresherrestore	eventhandle	--	否	自定义下拉刷新被复位
bind:refresherabort	eventhandle	--	否	自定义下拉刷新被中止

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。  

示例代码

TYML

<view class="page-head">
	<view class="page-head-title">scroll-view</view>
	<view class="page-head-line"></view>
</view>
 
<view class="page-section">
  <view class="page-section-title l-r-padding">
    <text>Vertical Scroll</text>
    <view>纵向滚动</view>
  </view>
  <view class="page-section-spacing">
    <scroll-view
      style="height: 150px;"
      scrollY="{{true}}"
      bind:scroll="scroll"
      bind:scrolltoupper="upper"
      bind:scrolltolower="lower"
      >
      <view id="demo1" class="scroll-view-item demo-text-1">A</view>
      <view id="demo2"  class="scroll-view-item demo-text-2">B</view>
      <view id="demo3" class="scroll-view-item demo-text-3">C</view>
    </scroll-view>
  </view>
</view>
 
<view class="page-section">
  <view class="page-section-title l-r-padding">
    <text>Horizontal Scroll</text>
    <view>横向滚</view>
  </view>
  <view class="page-section-spacing">
    <scroll-view
      class="scroll-view_H"
      scrollX="{{true}}"
      scrollIntoView="{{toView}}"
      scrollWithAnimation="{{true}}"
      bind:scroll="scroll"
      bind:scrolltoupper="upper"
      bind:scrolltolower="lower"
      >
      <view class="box">
        <view id="demo4" class="scroll-view-item_H demo-text-1">A</view>
        <view id="demo5"  class="scroll-view-item_H demo-text-2">B</view>
        <view id="demo6" class="scroll-view-item_H demo-text-3">C</view>
      </view>
    </scroll-view>
  </view>
</view>

JS

Page({
  data: {
    toView: 'demo5',
  },
  upper(e) {
    console.log('demo upper', e);
  },
  lower(e) {
    console.log('demo lower', e);
  },
  scroll(e) {
    console.log('demo scroll', e);
  },
});

TYSS

.page-section {
  width: 100%;
  display: block;
  margin: 30px 0;
}
.page-section:last-child {
  margin-bottom: 0;
}
.page-section-spacing {
  margin-top: 30px;
  box-sizing: border-box;
  padding: 0 40px;
}
.scroll-view_H {
  width: 100%;
  white-space: nowrap;
}
.box {
  display: flex;
  flex-wrap: nowrap;
  width: 300%;
}
.scroll-view-item_H {
  flex: 1;
  height: 150px;
  color: #ffffff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-view-item {
  height: 150px;
  color: #ffffff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-text-1 {
  background-color: #1aad19;
}
.demo-text-2 {
  background-color: #2782d7;
}
.demo-text-3 {
  background-color: #f1f1f1;
  color: #353535;
}

常见问题（FAQ）

为何 scroll-view 在 popup 扩展组件中无法滑动？

popup 组件上加上 disableScroll={{false}} 属性才能滑动。

如何监听 scroll-view 滚动到底部？

可以直接在 onScroll 方法中进行处理，使用 onScrollToLower 监听 scroll-view 的滚动高度来进行判断是否滑动到了底部。 scrollHeight 是 scroll-view 里面所有 view 的高度和，scrollTop 是滚动的值。

自定义页面蒙层的时候，当滚动蒙层里面的内容，蒙层底下页面也能跟着滑动？

可以给蒙层内部 scroll-view 或 view 添加 catch:touchmove事件,阻止事件冒泡。

 👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。