添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
设置竖向滚动条位置,内容底部到 scroll 底部的距离,如果有滚动吸附效果则先滚动再吸附。同时设置 scroll-top 和scroll-bottom 以scroll-top为准 scroll-left <number> | <string> 设置横向滚动条位置,内容左侧到 scroll 左侧的距离,如果有滚动吸附效果则先滚动再吸附 scroll-right <number> | <string> 设设置横向滚动条位置,内容右侧到 scroll 右侧的距离,如果有滚动吸附效果则先滚动再吸附。同时设置 scroll-left 和scroll-right 以scroll-left为准 bounces <boolean> false 是否边界回弹

支持 通用样式

<template>
  <div class="page">
      <scroll id="scrollId" scroll-y="true" onscrolltop="handleScrollTop">
          <div class="item">
             <text>北京</text>
          </div>
          <div class="item">
             <text>上海</text>
          </div>
          <div class="item">
             <text>广州</text>
          </div>
          <div class="item">
             <text>深圳</text>
          </div>
       </scroll>
  </div>
</template>
<script>
  export default {
    onShow() {
      this.$element('scrollId').getScrollRect({
        success({ width, height }) {
          console.log('宽度', width);
          console.log('高度', height);  
      // this.scrollTo()
      // this.scrollBy()
    handleScrollTop() {
      console.info('scrolled top.')
    scrollTo() {
      this.$element('scrollId').scrollTo({
        top: 1000,
        left: 0,
        behavior: 'smooth'
    scrollBy() {
      this.$element('scrollId').scrollBy({
        top: 1000,
        left: 0,
        behavior: 'smooth'
</script>
<style>
  .page {
    justify-content: center;
    align-items: center;
  #scrollId {
    width: 50%;
    height: 100px;
    flex-direction: column;
    background-color: yellowgreen;
  .item {
    width: 100%;
    height: 50px;
    justify-content: center;
</style>
© Xiaomi Vela all right reserved,powered by Gitbook文件修订时间: 2024-05-13 15:07:52