uniapp使用中小问题及解决方法集合

最新推荐文章于 2025-06-12 14:50:37 发布

原创最新推荐文章于 2025-06-12 14:50:37 发布 · 703 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

uniapp混合开发同时被 2 个专栏收录

11 篇文章

订阅专栏

移动端

9 篇文章

订阅专栏

1、 u-input 标签设置只读、禁用后,click事件不生效

// 解决u-input 标签 设置只读、禁用后,click事件不生效（不弹出弹框）
.input-disabled-click {
  pointer-events: none;
}

2、 uniapp实现u-datetime-picker时间选择器的默认日期定位，解决default-value不生效问题

this.$refs.NowEndPick.innerValue = Number(new Date()); //需要根据自己的需求，确定时间格式

完整的代码

<u-form-item prop="startDatetime" label="发生时间" @click="pickTimeClick" borderBottom>
          <u-input
              v-model="formData.startDatetime"
              placeholder="请选择"
              disabled
              border="none"
              suffixIcon="arrow-right"
              class="input-disabled-click"
          ></u-input>

        </u-form-item>
<u-datetime-picker
        ref="NowEndPick"
        :show="pickerTime"
        v-model="formData.eventTime"
        mode="datetime"
        @confirm="confirmPicker"
        format="yyyy-MM-dd HH:mm:ss"
        @cancel="closePicker"
        @close="closePicker"
    ></u-datetime-picker>

pickTimeClick() {
      this.pickerTime = true
      this.$refs.NowEndPick.innerValue = Number(new Date()); //需要根据自己的需求，确定时间格式
    },

3、隐藏原有的返回按钮，自定义返回按钮触发事件（可以解决嵌入原生安卓里面，返回异常问题）隐藏原有返回按钮

/* #ifdef H5 */
/* 页面A */
 ::v-deep .uni-page-head-hd>.uni-page-head-btn {
  display: none !important;
}
/* #endif */

配置新的返回按钮

 "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "demo",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "onReachBottomDistance": 60,
    "h5": {
      "titleNView": {
        "buttons": [{
          "type": "back",
          "float": "left"
        }]
      }
    }
  }

页面编写返回方法

export default {
	/** 自定义按钮 */
  onNavigationBarButtonTap : function (e) {
    console.log(e);
    uni.navigateBack({
      delta: 1 // 默认值是1，表示返回的页面层数
    });
  },
}