uni实现 侧边固定定位图标 滑动隐藏

移动端页面，有时候会出现一些固定定位在底部图标，比如领取购物券 联系客服等。这时候如果滑动页面，图标透明度变低，同时移动到屏幕侧边进行隐藏，效果如下

监听滑动事件，每次滑动时，触发动画。添加定时器，1s后显示该图标

<template>
  <div class="concat-common" :class="[ !transition ? 'fixed-transition' : '']">
    <div class="coupon" @click="getCoupon()">

    <image :src="../images/aa.jpg" mode="widthFix" style="width:180rpx;" @click="picUrl"></image>

    </div>

    <div class="concat-wrapper van-hairline--surround" @click="concatCustomer">
      <p>联系客服</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'concat',
  components: {
  },
  data () {
    return {
     transition: true, // 是否触发动画
     timer: null, // 定时器
    }
  },
 onPageScroll: function(object) {
        this.handleScroll()
},
  methods: {
    handleScroll () { // 每次滑动都会执行函数
      this.transition = false
      if (this.timer) { // 判断是否已存在定时器
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => { // 创建定时器，1s后图标回归原位置
        this.transition = true
      }, 1000)
    },
    concatCustomer () {
      openConcatDialog()
    },
    getCoupon () {
      let couponId = this.couponInfo.couponId
      getCoupons(couponId)
    }
  },
  computed: {
    couponInfo () {
      return JSON.parse(localStorage.getItem('couponInfo'))
    }
  }
}
</script>

<style lang="less" scoped>
@background: #f3f3f3;
.concat-common {
  width: 40px;
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: 10;
  transition: all 1s;
  &.fixed-transition {
    right: -2rem;
    opacity: 0.4;
  }
  .concat-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    &.van-hairline--surround::after {
      border-radius: 50%;
      border-color: #000;
    }
    p {
      width: 80%;
      margin: 5px auto;
      line-height: 14px;
    }
  }
  .coupon {
    padding: 4px 0;
    border-radius: 6px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    background: #a71f24;
    margin-bottom: 4px;
  }
}
</style>