uni-app 安卓APP开发记录

biaoblog.cn 个人博客

发布于 2022-12-08 14:51:31

7910

发布于 2022-12-08 14:51:31

1.使用uni-nav-bar 自定义导航栏

需要先在page.js中把当前页面设置

"navigationStyle": "custom"

然后在页面中使用uni-nav-bar

    <uni-nav-bar
      dark
      id="tabbar"
      class="tabBar"
      title="导航栏组件"
      :statusBar="true"
    ></uni-nav-bar>

需要设置:statusBar="true"，不然导航会跟手机顶部的状态栏重叠

在不知道这个属性之前，发现可以通过设置--status-bar-height（uni-app全局封装的变量）实现

#tabbar {
  margin-top: var(--status-bar-height); 
}

参考：https://blog.csdn.net/weixin_44143975/article/details/90789026

再看一下uni-nav-bar中uni-status-bar这个组件的源码：

<template>
  <view :style="{ height: statusBarHeight }" class="uni-status-bar">
    <slot />
  </view>
</template>

<script>
  export default {
    name: 'UniStatusBar',
    data() {
      return {
        statusBarHeight: 20
      }
    },
    mounted() {
      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
    }
  }
</script>

<style lang="scss" >
  .uni-status-bar {
    // width: 750rpx;
    height: 20px;
    // height: var(--status-bar-height);
  }
</style>

组件是通过uni.getSystemInfoSync().statusBarHeight这个方法来获取当前设备的状态栏的高度

2.APP左右上下滑动监听

直接引用别人写好的现成的组件：

<template>
  <view class="wrapper" @touchstart="fingerstart" @touchend="fingerend">
    <slot></slot>
  </view>
</template>
 
<script>
export default {
  name: "swipe-direct-com",
  data() {
    return {
      // 记录开始位置
      startData: {
        clientX: "",
        clientY: ""
      }
    };
  },
  props: {
    updDistance: {
      // 上下滑动 超过多少距离触发 updownDistance
      type: Number,
      default: 100
    },
    lrDistance: {
      // 左右滑动 超过多少距离触发
      type: Number,
      default: 50
    },
    topMed: {
      // 上划触发 方法名
      type: String,
      default: ""
    },
    bottomMed: {
      // 下滑触发 方法名
      type: String,
      default: ""
    },
    leftMed: {
      // 左滑触发 方法名
      type: String,
      default: ""
    },
    rightMed: {
      // 右滑触发 方法名
      type: String,
      default: ""
    }
  },
  // 解析数据
  mounted() {},
  methods: {
    // 当按下去的时候
    fingerstart(e) {
      // 记录 距离可视区域左上角 左边距 和 上边距
      this.startData.clientX = e.changedTouches[0].clientX;
      this.startData.clientY = e.changedTouches[0].clientY;
    },
    // 当抬起来的时候
    fingerend(e) {
      // 当前位置 减去 按下位置 计算 距离
      const subX = e.changedTouches[0].clientX - this.startData.clientX;
      const subY = e.changedTouches[0].clientY - this.startData.clientY;
      if (subY > this.updDistance || subY < -this.updDistance) {
        if (subY > this.updDistance) {
          this.bottomscroll(subY);
        } else if (subY < -this.updDistance) {
          this.topscroll(subY);
        }
      } else {
        if (subX > this.lrDistance) {
          this.rightscroll(subX);
        } else if (subX < -this.lrDistance) {
          this.leftscroll(subX);
        } else {
          console.log("无效操作");
        }
      }
    },
    // 上滑触发
    topscroll(dista) {
      this.topMed ? this.$emit(`${this.topMed}`, dista) : null;
      console.log("触发了上滑方法!");
    },
    // 下滑触发
    bottomscroll(dista) {
      this.bottomMed ? this.$emit(`${this.bottomMed}`, dista) : null;
      console.log("触发了下滑方法!");
    },
    // 右滑触发
    rightscroll(dista) {
      this.rightMed ? this.$emit(`${this.rightMed}`, dista) : null;
      console.log("触发了右滑方法!");
    },
    // 左滑触发
    leftscroll(dista) {
      this.leftMed ? this.$emit(`${this.leftMed}`, dista) : null;
      console.log("触发了左滑方法!");
    }
  }
};
</script>

然后引用组件：

  <swiper-direct-com
    :lrDistance="5"
    leftMed="scrollL"
    rightMed="scrollR"
    @scrollL="scrollL"
    @scrollR="scrollR"
  >
 
      <!-- 套起来内容 -->

  </swiper-direct-com>

两个方法在methods中：

 methods: {
    // 左滑触发方法
    scrollL() {
      console.log("左滑触发方法");
      /*
        业务逻辑 ....
      */
    },
    // 右滑触发方法
    scrollR() {
      /*
        业务逻辑 ....
      */
      console.log("右滑触发方法");
    }
}

参考：https://blog.csdn.net/slow097/article/details/122469863

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

https