weex实现滚动条和导航栏联动-优快云博客

本文介绍了如何修改Weex官方示例，实现在滚动条滑动时导航栏联动，提升用户体验。通过调整scroller和elevator组件的交互，确保视图同步更新。

改写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.target
      const ref = this.$refs[refId]
      const el = ref ? ref[0] : null

      dom.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>