小程序滚动条跳转对应的内容

当点击右边的随机一个字母 页面会跳转到 对应的字母 控制滚动条

在这里插入图片描述

<template>
  <div class="city_container">
    <scroll-view class="scroll-view" scroll-y :scroll-into-view="title">// 控制y轴滚动   接收需跳转到对应的id
      <div v-for="(v,i) in cityData" :key="i" :id="v.title"> //循环出a-z的字母  id固定
          {
    
    {
    
    v.title}}
      </div>
      <ul>
        <li
          v-for="(v,i) in cityData"
          :key="i"
          :id="v.title"
          @click="scrollIntoView(v.title)" //点击后传参   需要告诉scroll-into-view跳转对应的内容id
        >{
    
    {
    
    v.title}}</li>	// 循环出a-字母  id固定
      </ul>
    </scroll-view>
  </div>
</template>


<script>
let cityData = require("../../utils/cityData.js");
console.log(cityData);
export default {
    
    
  data() {
    
    
    return {
    
    
      title: "A",
    };
  },
  methods: {
    
    
    scrollIntoView(i) {
    
    
      console.log(i);
      this.title = i;
    },
};
</script>

猜你喜欢

转载自blog.csdn.net/weixin_54645059/article/details/113761058
今日推荐