今天是人生第一次写博客
本人在校生,前端小白,写博客目的是为了记录平时学习,做项目时遇到的问题,将学习经验慢慢积累下来,希望能坚持下去。
正好最近用uniapp写个小程序的项目,要实现左边城市列表,右边字母索引,类似锚点定位的小功能,对大佬可能分分钟的事,但对我这个对原生小程序还不熟系的小白来说就有点费时了,于是写完后来写了个简单的demo来记录下
scroll-into-view
因为本人相比较原生小程序的语法,更熟悉Vue的语法,所以用的uniapp框架
scroll-view组件中的属性scroll-into-view是最主要的,不太会组织语言,上代码
<template>
<view class="container">
<!-- 左边内容 -->
<scroll-view class="scroller" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">
<view :id="item" class="left" v-for="item in list">{{item.toUpperCase()}}</view>
</scroll-view>
<!-- 右边索引 -->
<view>
<view :data-id="item" v-for="item in list" @tap="bindToView">{{item}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list:['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
toView:''
}
},
methods:{
bindToView(event){
var id = event.currentTarget.dataset.id;
console.log(id)
this.toView = id;
}
}
}
</script>
<style lang="scss">
.container{
width: 100%;
display: flex;
scroll-view{
height: 100vh;
.left{
font-size: 50rpx;
line-height: 150rpx;
}
}
> view{
position: fixed;
right: 10rpx;
}
}
</style>
需要注意的是scroll-view必须设置高度,不设置的话没效果,但不要设置100%,除非父元素写了高度.
同时虽然文档写的值应为某子元素id,但也可以是子孙元素
附上官方文档