改写weex官方实例，使其可以实现滚动条和导航栏联动
入口
<template><scroller @scroll="goTO" offset-accuracy="100" class="wrapper"><div class="floor" v-for="(name, index) in floors" :ref="'floor'+name"><text class="floor-title">- {{name}} -</text><div class="goods"></div></div><div style="padding-bottom: 500wx;"></div><scroller class="elevator" scroll-direction="horizontal" show-scrollbar="false"><text class="elevator-title">主要会场：</text><div class="elevator-item" v-for="(name, index) in floors" :ref="'item'+index"@click="go2floor($event, 'floor'+name)"><text :style="{color:typeIndex===index?'red':''}" class="item-text" :ref="'text'+index">{{name}}</text></div><div style="padding-right: 400wx;"></div></scroller></scroller></template><script>const dom = weex.requireModule('dom') || {}export default {data () {return {typeIndex: 0,w: 0,floors: ['买手精选', '进口好货', '魅力美妆', '滋补保健', '进口母婴', '环球美食', '数码家电', '个护家清', '家居家纺', '名庄酒水']}},methods: {go2floor: function (event, refId) {const target = event.targetconst ref = this.$refs[refId]const el = ref ? ref[0] : nulldom.scrollToElement(target, {offset: -300})if (el) {dom.scrollToElement(el, {offset: -60})}},goTO (e) {const s = e.contentOffset// 获取scroller高度除单个宽度取整this.typeIndex = -(Math.floor(s.y / this.w) + 1)const name = this.floors[this.typeIndex]const ref = this.$refs['item' + this.typeIndex]if (this.typeIndex >= 0) {dom.scrollToElement(ref, {offset: -300})}}},mounted () {this.$nextTick(() => {const name = 'floor买手精选'// 获取不同设备下商品信息的高度this.w = this.$refs[name][0].clientHeight})}}</script><style scoped>.wrapper {position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-color: #f4f4f4;padding-top: 90wx;}.elevator {height: 100wx;padding-left: 15wx;padding-right: 15wx;background-color: #39f;position: fixed;top: 0;left: 0;right: 0;}.elevator-item {line-height: 90wx;margin: 0wx 15wx;}.elevator-title {font-size: 36wx;font-weight: 36wx;color: #fff;line-height: 90wx;}.item-text {font-size: 36wx;color: #fff;line-height: 90wx;}.floor {padding: 30wx;}.floor-title {font-size: 40wx;text-align: center;line-height: 70wx;}.goods {height: 600wx;border-width: 2wx;border-style: solid;border-color: rgb(162, 217, 192);background-color: rgba(162, 217, 192, 0.2);}.floor:after {padding-bottom: 500wx;}</style>
