vue根据拼音选择城市better-scroll

点击右侧使用$emit将所点击的传递给父元素，父元素通过属性传递的方式传递给区域栏，使用watch钩子函数进行监听，通过better-scroll提供的方法this.scroll.scrollToElement(element);进行左右联动

区域栏
<template><div class="list" ref="wrapper"><div><div class="area"><div class="title border-topbottom">当前城市</div><div class="button-list"><div class="button-wrapper"><div class="button">北京</div></div></div></div><div class="area"><div class="title border-topbottom">热门城市</div><div class="button-list"><div class="button-wrapper" v-for="item of hot" :key="item.id"><div class="button">{{item.name}}</div></div></div></div><div class="area" v-for="(item , key) of cities" :key="key" :ref="key"><div class="title  border-topbottom">{{key}}</div><div class="item-liast"><div class="item border-bottom" v-for="innerItem of item" :key="innerItem.id">{{innerItem.name}}</div></div></div></div></div>
</template>
<script>
import Bscroll from "better-scroll";
export default {name: "List",props: {hot: Array,cities: Object,letter: String,},mounted() {console.log(this.scroll);this.scroll = new Bscroll(this.$refs.wrapper);},watch: {letter(e) {console.log(e);const element = this.$refs[this.letter][0];this.scroll.scrollToElement(element);console.log(element);},},
};
</script>
<style lang="stylus" scoped>
@import '~style/varibles.styl';.border-topbottom {&:before {border-color: #777;}&:after {border-color: #777;}
}.border-bottom {&:before {border-color: #777;}
}.list {overflow: hidden;position: absolute;left: 0;top: 1.58rem;right: 0;bottom: 0;
}.button-list {overflow: hidden;padding: 0.1rem 0.6rem 0.1rem 0.1rem;
}.button-wrapper {float: left;width: 33.33%;
}.button {text-align: center;margin: 0.1rem;border: 0.02rem solid #ccc;padding: 0.1rem 0;border-radius: 0.06rem;
}.title {line-height: 0.44rem;background-color: #eee;padding-left: 0.2rem;color: #666;font-size: 0.26rem;
}.item-liast .item {line-height: 0.76rem;padding-left: 0.2rem;
}
</style>

右侧拼音栏
<template><div class="list"><div class="item" v-for="(item , key) of cities" :key="key" @click="handleLetterClick">{{key}}</div></div>
</template>
<script>
export default {name: "Alphabet",props: {cities: Object,},methods: {handleLetterClick(e) {// console.log(e.target.innerText);this.$emit("change", e.target.innerText);},},
};
</script>
<style lang="stylus" scoped>
@import '~style/varibles.styl';.list {display: flex;flex-direction: column;justify-content: center;position: absolute;top: 1.58rem;right: 0;bottom: 0;width: 0.4rem;
}.item {text-align: center;line-height: 0.4rem;color: $bgColor;
}
</style>

vue根据拼音选择城市better-scroll相关推荐

移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址
效果图: 在public文件夹下的index.html文件中head标签下加上script标签如下: <script type="text/javascript">wi ...
一个简单的VUE选择城市组件
首先看下效果: ps: 请忽略上面的水印该组件基于vue + iview搭建而成,可以根据需求自行修改,接下来就是组件的整体的说明了: 一.目录结构这是一个常规的VUE的目录的结构,我们使用的文件 ...
选择城市，按城市的首字母进行排序
1.新建父组件choiceCity.vue <template><view class="choiceCity"><view class=" ...
Android仿美团选择城市
需求:需要有当前定位城市,热门城市,下面按照城市首拼音排序,滑动的过程中字母A,B,C-会置顶互相切换.右侧有快速切换字母城市的选择效果图: 思路:因为上部分要划走,RecyclerView滑动过程 ...
html城市手机搜索,原生js实现html手机端城市列表索引选择城市
本文实例为大家分享了js实现手机端城市列表索引选择城市的具体代码,供大家参考,具体内容如下 html部分: 定位城市上海市 css部分: *{ margin: 0; padding: 0; list ...
【Android】快速实现仿美团选择城市界面，微信通讯录界面
概述本文是这个系列的第三篇,不出意外也是终结篇.因为使用经过重构后的控件已经可以快速实现市面上带索引导航.悬停分组的列表界面了. 在前两篇里,我们从0开始,一步一步实现了仿微信通讯录.饿了么选餐界 ...
Android 仿美团选择城市、微信通讯录、饿了么点餐列表的导航悬停分组索引列表
SuspensionIndexBar 项目地址:mcxtzhang/SuspensionIndexBar 简介:快速实现分组悬停.右侧索引导航联动列表. 如美团选择城市界面,微信通讯录界面.饿了么 ...
[Android精品源码] Android 仿美团网,探索ListView的A-Z字母排序功能实现选择城市
Material Design中文版Code4APPPHP100UI4APP 开启辅助访问设为首页收藏本站快捷导航切换到宽版切换风格石刚 | |我的 |签到打卡 |设置 |消息 |提醒(2) |退出 ...
ios Objective-c 地图选择城市
ios 地图选择城市切换城市,点击城市按钮设置城市实现思路 1.获取数据 1.拖出一个UItextView在他的文本框中输入城市信息 2.拖出这个textView的输出口并获得并处理他的数据他的数 ...
ReactNative 滑动字母选择城市以及搜索功能
先上效果图遇到的问题右侧字母选择器高度问题, 右侧字母选择器如何使用手势检测panresponse 右侧字母选择器计算高度如何判断是触摸到那个字母上的(思考如果是native应用是如何做的 ...

vue根据拼音选择城市better-scroll

vue根据拼音选择城市better-scroll相关推荐

最新文章

热门文章