$refs拼接跳转指定位置

最新推荐文章于 2024-07-04 16:56:15 发布

哼唧怪的嘤嘤怪

最新推荐文章于 2024-07-04 16:56:15 发布

阅读量720

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41623830/article/details/123495522

版权

VUE 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

实现动态拼接要跳转的位置
scrollToElement(ref, options)

@ref，要滚动到的那个节点。
@options
offset，一个到其可见位置的偏移距离，默认是 0。
animated，是否需要附带滚动动画，默认是 true。
下面是官方文档的代码

<template>
    <view class="wrapper">
      <scroller class="scroller">
        <view class="row" v-for="(name, index) in rows" :ref="'item'+index">
          <text class="text" :ref="'text'+index">{{name}}</text>
        </view>
      </scroller>
      <view class="group">
        <text @click="goto10" class="button">Go to 10</text>
        <text @click="goto20" class="button">Go to 20</text>
      </view>
    </view>
  </template>
  <script>
    const dom = uni.requireNativePlugin('dom')
    export default {
      data() {
        return {
          rows: []
        }
      },
      created() {
        for (let i = 0; i < 30; i++) {
          this.rows.push('row ' + i)
        }
      },
      methods: {
        goto10(count) {
          const el = this.$refs.item10[0]
          dom.scrollToElement(el, {})
        },
        goto20(count) {
          const el = this.$refs.item20[0]
          dom.scrollToElement(el, {
            offset: 0
          })
        }
      }
    }
  </script>
  <style scoped>
    .scroller {
      width:700rpx;
      height:500px;
      border-width: 3px;
      border-style: solid;
      border-color: rgb(162, 217, 192);
      margin:0 25rpx;
    }
    .row {
      height: 100rpx;
      flex-direction: column;
      justify-content: center;
      padding-left: 30rpx;
      border-bottom-width: 2px;
      border-bottom-style: solid;
      border-bottom-color: #DDDDDD;
    }
    .text {
      font-size: 45rpx;
      color: #666666;
    }
    .group {
      flex-direction: row;
      justify-content: center;
      margin-top: 60rpx;
    }
    .button {
      width: 200rpx;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
      font-size: 40rpx;
      margin-left: 30rpx;
      margin-right: 30rpx;
      text-align: center;
      color: #41B883;
      border-width: 2px;
      border-style: solid;
      border-color: rgb(162, 217, 192);
      background-color: rgba(162, 217, 192, 0.2);
    }
  </style>

官方文档虽然已经有跳转了但是并不能拼接动态的跳转位置

goto10(count) {
   const el = this.$refs.item10[0]
   dom.scrollToElement(el, {})
 },

解决方案
let num = newvideonumber   // 页码
const el = this.$refs.item[num]
dosn.scrollToElement(el, {
  offset: 0,
  animated:false
})
this.k = newvideonumber