一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    uni-app 安卓APP开发记录

    技术 205 2022-12-07 12:11

    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

    文章评论

    评论列表(0