解决uni-app官方弹框popup关闭不了问题；/pages/extUI/popup/popup；uni-app弹框popup打开调用事件。unin-app弹框封装；

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210716165216781.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY=,size_16,color_FFFFFF,t_70)

官方uni-app的弹框popup模板问题:
官方的弹框示例页面在 /pages/extUI/popup/popup

1.官方是没有在引入的组件上写@close关闭弹窗方法的 需要自己加
2.官方是点击确认时候 立即就关闭弹框了 但是loading还在
原因是子组件小程序 立即就触发关闭事件了 改成在父级的loading消失后关闭即可 3.官方的popup弹框 自动打开后 关闭不了 只需要将38行代码 before-close属性值改成 false 即可 4.弹框子组件 不是页面 故没有自己的 onLoad 和 onShow 方法，
同时ta自己的 created 方法在已进入到父级页面时候就已经触发了 
（问题是可能有需求是，点击弹框后，拿父级参数掉接口获取数据展示）
（如果写在子组件弹框的created 没父级参数 且一进入父级页面就掉接口了）
（那么就需要找到一个点击打开弹框时候，必须调用的方法，在里面掉接口）
详细见第三个按钮 每次点击打开时候触发first掉接口5.如果是tabBar A页面 弹框打开后 未关闭 就点击另一个tabBar B页面 
然后再切换A页面 你会发现弹框还是打开的 所以需要我们在A页面 
hide隐藏时候判断 如果存在未关闭的弹框 就调用取消按钮 关闭掉 6.官方的popup弹框 点击确定时候 虽然有loading
但是此时仍然可以点击取消按钮 或者点击弹框下的页面内容
解决思路：点击确认时候添加uni-popup遮罩层

问题见下图：
在这里插入图片描述

修改封装后：

在这里插入图片描述

弹框点击确认未添加遮罩层：导致loading时候仍然可以点击取消按钮
在这里插入图片描述

点击去人添加遮罩层后：
在这里插入图片描述

注意：只是封装了三个弹框 可以直接复制这三个子组件进行使用，需要更改popup.js的引入路径
在这里插入图片描述

1.弹框页面 tk.vue：

<template><view>官方uni-app的弹框popup模板问题:<br />官方的弹框示例页面在 /pages/extUI/popup/popup1.官方是没有在引入的组件上写@close关闭弹窗方法的 需要自己加<br />2.官方是点击确认时候 立即就关闭弹框了 但是loading还在<br />原因是子组件小程序 立即就触发关闭事件了改成在父级的loading消失后关闭即可 <br />3.官方的popup弹框 自动打开后<br />关闭不了 只需要将38行代码 before-close属性值改成 false 即可<br />4.弹框子组件 不是页面 故没有自己的 onLoad 和 onShow 方法，<br />同时ta自己的 created 方法在已进入到父级页面时候就已经触发了<br />（问题是可能有需求是，点击弹框后，拿父级参数掉接口获取数据展示）<br />（如果写在子组件弹框的created 没父级参数 且一进入父级页面就掉接口了）<br />（那么就需要找到一个点击打开弹框时候，必须调用的方法，在里面掉接口）<br />详细见第三个按钮 每次点击打开时候触发first掉接口 <br />5.如果是tabBarA页面 弹框打开后 未关闭 就点击另一个tabBar B页面 <br />然后再切换A页面你会发现弹框还是打开的 所以需要我们在A页面 <br />hide隐藏时候判断如果存在未关闭的弹框 就调用取消按钮 关闭掉<br />6.官方的popup弹框 点击确定时候 虽然有loading<br />但是此时仍然可以点击取消按钮 或者点击弹框下的页面内容<br />解决思路：点击确认时候添加uni-popup遮罩层<br /><button class="button" type="primary" @click="confirmDialog"><text class="button-text">输入对话框</text></button><uni-popup id="dialogInput" ref="dialogInput" type="dialog" @change="change"><!-- 官方是没有在引入的组件上写@close关闭弹窗方法的  需要自己加 --><my-dialog-input mode="input" title="输入内容" value="对话框预置提示内容!" placeholder="请输入内容" @close="nodialoginput" @confirm="dialogInputConfirm"></my-dialog-input></uni-popup><button class="button" type="primary" @click="openDel"><text class="button-text">删除对话框</text></button><uni-popup id="mydialogdel" ref="mydialogdel" type="dialog" @change="change"><my-dialog-del mode="input" title="输入内容" value="对话框预置提示内容!" placeholder="请输入内容" @close="nodialogdel" @confirm="yesdialogdel"></my-dialog-del></uni-popup><button class="button" type="primary" @click="openFirst"><text class="button-text">每次点击打开时候触发first掉接口</text></button><uni-popup id="mydialogfirst" ref="mydialogfirst" type="dialog" @change="change"><!-- 需要给子组件设置ref 才能获取到子组件的方法 才能触发 first --><my-dialog-first ref="myselffirst" mode="input" title="输入内容" value="对话框预置提示内容!" placeholder="请输入内容" @close="nodialogfirst" @confirm="yesdialogfirst"></my-dialog-first></uni-popup><button type="primary" @click="openzhezhaoceng">解决loading...时候仍可点击问题</button><uni-popup id="mydialogdel2" ref="mydialogdel2" type="dialog" @change="change"><my-dialog-del mode="input" title="输入内容" value="对话框预置提示内容!" placeholder="请输入内容" @close="nodialogdel2" @confirm="yesdialogdel2"></my-dialog-del></uni-popup><!-- 多加一个遮罩层 并且使遮罩层全屏 --><uni-popup id="zhezhaoceng" ref="zhezhaoceng" type="dialog" @change="change"><view class="all-box"></view></uni-popup><uni-link href="https://uniapp.dcloud.io/component/?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83" text="点击查看 具体解决 打开弹框触发first方法"></uni-link></view>
</template><script>
// 子组件符合easycom组件规范 故不需引入 直接使用即可 easycom组件规范：https://uniapp.dcloud.io/component/?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83
export default {data () {return {delId: null,a: ""}},onHide () {// 隐藏时候判断 如果存在未关闭的弹框 就调用取消按钮 关闭掉if (this.$refs['dialogInput']) {this.$refs['dialogInput'].close()}if (this.$refs['mydialogdel']) {this.nodialogdel()}if (this.$refs['mydialogfirst']) {this.nodialogfirst()}},methods: {// 以下三个方法是按钮一：提交信息弹框confirmDialog () {this.$refs.dialogInput.open()},//  输入对话框的确定事件dialogInputConfirm (done) {uni.showLoading({title: '3秒后会关闭',})console.log(done)setTimeout(() => {this.$refs.dialogInput.close()uni.hideLoading()// 关闭窗口后，恢复默认内容}, 3000)},nodialoginput () {// 调用子级的弹框关闭窗口方法后，恢复默认内容this.$refs.dialogInput.close()},// 以下三个方法是按钮二：删除弹框封装openDel () {this.$refs.mydialogdel.open()},yesdialogdel (done) {uni.showLoading({title: '3秒后会关闭',})console.log('点击确认传递的参数', done)setTimeout(() => {//   调用删除的接口this.delId = done.iduni.hideLoading()// 调用子级的弹框关闭窗口方法后，恢复默认内容this.$refs.mydialogdel.close()this.delId = null}, 3000)},nodialogdel () {// 调用子级的弹框关闭窗口方法后，恢复默认内容this.$refs.mydialogdel.close()this.delId = null},// 以下三个方法是按钮三：触发打开弹框的初始化openFirst () {console.log('点击了父级的打开按钮')this.$refs.mydialogfirst.open()this.$refs.myselffirst.first()},yesdialogfirst (done) {uni.showLoading({title: '3秒后会关闭',})console.log('点击确认传递的参数', done)setTimeout(() => {//   调用删除的接口this.delId = done.iduni.hideLoading()// 调用子级的弹框关闭窗口方法后，恢复默认内容this.$refs.mydialogfirst.close()this.delId = null}, 3000)},nodialogfirst () {// 调用子级的弹框关闭窗口方法后，恢复默认内容this.$refs.mydialogfirst.close()this.delId = null},// 以下三个方法是按钮四：添加遮罩层处理openzhezhaoceng () {this.$refs.mydialogdel2.open()},yesdialogdel2 (done) {// 再点击确认的时候 打开遮罩层this.$refs.zhezhaoceng.open()uni.showLoading({title: '3秒后会关闭',})setTimeout(() => {//   调用删除的接口this.delId = done.iduni.hideLoading()//loading消失 就去掉遮罩层this.$refs.zhezhaoceng.close()// 调用子级的弹框关闭窗口方法后，恢复默认内容this.$refs.mydialogdel2.close()this.delId = null}, 3000)},nodialogdel2 () {// 调用子级的弹框关闭窗口方法后，恢复默认内容this.$refs.mydialogdel2.close()this.delId = null},/*** popup 状态发生变化触发* @param {Object} e*/change (e) {console.log('popup ' + e.type + ' 状态', e.show)},},
}
</script><style lang="less" scoped>
button {margin-top: 20rpx;
}.all-box {width: -webkit-calc(~"100vw") !important;width: -moz-calc(~"100vw") !important;width: calc(~"100vw") !important;height: -webkit-calc(~"100vh") !important;height: -moz-calc(~"100vh") !important;height: calc(~"100vh") !important;
}
</style>

2.子组件删除弹框
在这里插入图片描述

<template><view class="uni-popup-dialog"><view class="del-content">您确定删除该条数据吗？</view><view class="uni-dialog-button-group"><view class="uni-dialog-button" @click="closeDialog"><text class="uni-dialog-button-text">取消</text></view><view class="uni-dialog-button uni-border-left" @click="onOk"><text class="uni-dialog-button-text uni-button-color">确定</text></view></view></view>
</template><script>
import popup from '../popup.js'
/*** PopUp 弹出层-对话框样式* @description 弹出层-对话框样式* @tutorial https://ext.dcloud.net.cn/plugin?id=329* @property {String} value input 模式下的默认值* @property {String} placeholder input 模式下输入提示* @property {String} type = [success|warning|info|error] 主题样式*  @value success 成功* 	@value warning 提示* 	@value info 消息* 	@value error 错误* @property {String} mode = [base|input] 模式、* 	@value base 基础对话框* 	@value input 可输入对话框* @property {String} content 对话框内容* @property {Boolean} beforeClose 是否拦截取消事件* @event {Function} confirm 点击确认按钮触发* @event {Function} close 点击取消按钮触发*/export default {name: "uniPopupDialog",mixins: [popup],props: {value: {type: [String, Number],default: ''},placeholder: {type: [String, Number],default: '请输入内容'},type: {type: String,default: 'error'},mode: {type: String,default: 'base'},title: {type: String,default: '提示'},content: {type: String,default: ''},beforeClose: {type: Boolean,default: false}},data() {return {dialogType: 'error',focus: false,val: ""}},watch: {type(val) {this.dialogType = val},mode(val) {if (val === 'input') {this.dialogType = 'info'}},value(val) {this.val = val}},created() {// 对话框遮罩不可点击this.popup.disableMask()// this.popup.closeMask()if (this.mode === 'input') {this.dialogType = 'info'this.val = this.value} else {this.dialogType = this.type}},mounted() {this.focus = true},methods: {/*** 点击确认按钮*/onOk() {if (this.mode === 'input') {// this.$emit('confirm', this.val)// 点击确定传递的值console.log(1111);this.$emit('confirm', { id: 11 })} else {this.$emit('confirm')}// 这个是真正的关闭弹框操作 --- 原生是打开的 我们需要手动注释掉// if (this.beforeClose) return// this.popup.close()},/*** 点击取消按钮*/closeDialog() {this.$emit('close')// 这个是真正的关闭弹框操作 --- 原生是打开的 我们需要手动注释掉// if (this.beforeClose) return// this.popup.close()},// 这个是原生调用真证的关闭的方法  -------我们在父级里来调用------已完成确认和取消时候关闭弹框close() {this.popup.close()}}
}
</script><style lang="scss" scoped>
.uni-popup-dialog {width: 300px;border-radius: 15px;background-color: #fff;
}.uni-dialog-title {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;justify-content: center;padding-top: 15px;padding-bottom: 5px;
}.uni-dialog-title-text {font-size: 16px;font-weight: 500;
}.uni-dialog-content {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;justify-content: center;align-items: center;padding: 5px 15px 15px 15px;
}.uni-dialog-content-text {font-size: 14px;color: #6e6e6e;
}.uni-dialog-button-group {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;border-top-color: #f5f5f5;border-top-style: solid;border-top-width: 1px;
}.uni-dialog-button {/* #ifndef APP-NVUE */display: flex;/* #endif */flex: 1;flex-direction: row;justify-content: center;align-items: center;height: 45px;
}.uni-border-left {border-left-color: #f0f0f0;border-left-style: solid;border-left-width: 1px;
}.uni-dialog-button-text {font-size: 14px;
}.uni-button-color {color: #007aff;
}.uni-dialog-input {flex: 1;font-size: 14px;border: 1px #eee solid;height: 40px;padding: 0 10px;border-radius: 5px;color: #555;
}.uni-popup__success {color: #4cd964;
}.uni-popup__warn {color: #f0ad4e;
}.uni-popup__error {color: #dd524d;
}.uni-popup__info {color: #909399;
}
</style><style lang="less" scoped>
.del-content {padding: 50rpx;text-align: center;
}
</style>

3.子组件触发first弹框： 参考另一篇触发时机

在这里插入图片描述

<template><view class="uni-popup-dialog"><view class="del-content">在first（）方法内做初始化或者掉接口获取数据展示</view><view class="uni-dialog-button-group"><view class="uni-dialog-button" @click="closeDialog"><text class="uni-dialog-button-text">取消</text></view><view class="uni-dialog-button uni-border-left" @click="onOk"><text class="uni-dialog-button-text uni-button-color">确定</text></view></view></view>
</template><script>
import popup from '../popup.js'
/*** PopUp 弹出层-对话框样式* @description 弹出层-对话框样式* @tutorial https://ext.dcloud.net.cn/plugin?id=329* @property {String} value input 模式下的默认值* @property {String} placeholder input 模式下输入提示* @property {String} type = [success|warning|info|error] 主题样式*  @value success 成功* 	@value warning 提示* 	@value info 消息* 	@value error 错误* @property {String} mode = [base|input] 模式、* 	@value base 基础对话框* 	@value input 可输入对话框* @property {String} content 对话框内容* @property {Boolean} beforeClose 是否拦截取消事件* @event {Function} confirm 点击确认按钮触发* @event {Function} close 点击取消按钮触发*/export default {name: "uniPopupDialog",mixins: [popup],props: {value: {type: [String, Number],default: ''},placeholder: {type: [String, Number],default: '请输入内容'},type: {type: String,default: 'error'},mode: {type: String,default: 'base'},title: {type: String,default: '提示'},content: {type: String,default: ''},beforeClose: {type: Boolean,default: false}},data() {return {dialogType: 'error',focus: false,val: ""}},watch: {type(val) {this.dialogType = val},mode(val) {if (val === 'input') {this.dialogType = 'info'}},value(val) {this.val = val}},onLoad(options) {console.log('子组件弹框的 onLoad');},onShow() {console.log('子组件弹框的 onShow');},created() {console.log('子组件弹框的 created');// 对话框遮罩不可点击this.popup.disableMask()// this.popup.closeMask()if (this.mode === 'input') {this.dialogType = 'info'this.val = this.value} else {this.dialogType = this.type}},mounted() {this.focus = true},methods: {// 这个方法只有每次点击打开弹框时候才会触发---相当于自己的一个created---在这个方法内做初始化first() {uni.showToast({title: '打开就触发first',icon: 'success',mask: true})},/*** 点击确认按钮*/onOk() {if (this.mode === 'input') {// this.$emit('confirm', this.val)// 点击确定传递的值console.log(1111);this.$emit('confirm', { id: 11 })} else {this.$emit('confirm')}// 这个是真正的关闭弹框操作 --- 原生是打开的 我们需要手动注释掉// if (this.beforeClose) return// this.popup.close()},/*** 点击取消按钮*/closeDialog() {this.$emit('close')// 这个是真正的关闭弹框操作 --- 原生是打开的 我们需要手动注释掉// if (this.beforeClose) return// this.popup.close()},// 这个是原生调用真证的关闭的方法  -------我们在父级里来调用------已完成确认和取消时候关闭弹框close() {this.popup.close()}}
}
</script><style lang="scss" scoped>
.uni-popup-dialog {width: 300px;border-radius: 15px;background-color: #fff;
}.uni-dialog-title {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;justify-content: center;padding-top: 15px;padding-bottom: 5px;
}.uni-dialog-title-text {font-size: 16px;font-weight: 500;
}.uni-dialog-content {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;justify-content: center;align-items: center;padding: 5px 15px 15px 15px;
}.uni-dialog-content-text {font-size: 14px;color: #6e6e6e;
}.uni-dialog-button-group {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;border-top-color: #f5f5f5;border-top-style: solid;border-top-width: 1px;
}.uni-dialog-button {/* #ifndef APP-NVUE */display: flex;/* #endif */flex: 1;flex-direction: row;justify-content: center;align-items: center;height: 45px;
}.uni-border-left {border-left-color: #f0f0f0;border-left-style: solid;border-left-width: 1px;
}.uni-dialog-button-text {font-size: 14px;
}.uni-button-color {color: #007aff;
}.uni-dialog-input {flex: 1;font-size: 14px;border: 1px #eee solid;height: 40px;padding: 0 10px;border-radius: 5px;color: #555;
}.uni-popup__success {color: #4cd964;
}.uni-popup__warn {color: #f0ad4e;
}.uni-popup__error {color: #dd524d;
}.uni-popup__info {color: #909399;
}
</style><style lang="less" scoped>
.del-content {padding: 50rpx;text-align: center;
}
</style>

4.子组件提交信息弹框：
在这里插入图片描述

<template><view class="uni-popup-dialog"><view class="uni-dialog-title"><text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text></view><view v-if="mode === 'base'" class="uni-dialog-content"><slot><text class="uni-dialog-content-text">{{content}}</text></slot></view><view v-else class="uni-dialog-content"><slot><input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder"></slot></view><!-- 自己添加的 --><view class="li"><view class="left-box">用户名：</view><input class="uni-dialog-input right-box" v-model="username" type="text" :placeholder="placeholder"></view><view class="li"><view class="left-box">手机号：</view><input class="uni-dialog-input right-box" v-model="usertel" type="text" :placeholder="placeholder"></view><view class="uni-dialog-button-group"><view class="uni-dialog-button" @click="closeDialog"><text class="uni-dialog-button-text">取消</text></view><view class="uni-dialog-button uni-border-left" @click="onOk"><text class="uni-dialog-button-text uni-button-color">确定</text></view></view></view>
</template><script>
import popup from '../popup.js'
/*** PopUp 弹出层-对话框样式* @description 弹出层-对话框样式* @tutorial https://ext.dcloud.net.cn/plugin?id=329* @property {String} value input 模式下的默认值* @property {String} placeholder input 模式下输入提示* @property {String} type = [success|warning|info|error] 主题样式*  @value success 成功* 	@value warning 提示* 	@value info 消息* 	@value error 错误* @property {String} mode = [base|input] 模式、* 	@value base 基础对话框* 	@value input 可输入对话框* @property {String} content 对话框内容* @property {Boolean} beforeClose 是否拦截取消事件* @event {Function} confirm 点击确认按钮触发* @event {Function} close 点击取消按钮触发*/export default {name: "uniPopupDialog",mixins: [popup],props: {value: {type: [String, Number],default: ''},placeholder: {type: [String, Number],default: '请输入内容'},type: {type: String,default: 'error'},mode: {type: String,default: 'base'},title: {type: String,default: '提示'},content: {type: String,default: ''},beforeClose: {type: Boolean,default: false},},data() {return {dialogType: 'error',focus: false,val: "",username: '',usertel: '',}},watch: {type(val) {this.dialogType = val},mode(val) {if (val === 'input') {this.dialogType = 'info'}},value(val) {this.val = val}},created() {// 对话框遮罩不可点击this.popup.disableMask()// this.popup.closeMask()if (this.mode === 'input') {this.dialogType = 'info'this.val = this.value} else {this.dialogType = this.type}},mounted() {this.focus = true},methods: {/*** 点击确认按钮*/onOk() {if (this.mode === 'input') {this.$emit('confirm', { val: this.val, username: this.username, usertel: this.usertel })} else {this.$emit('confirm')}// 这个是真正的关闭弹框操作 --- 原生是打开的 我们需要手动注释掉// if (this.beforeClose) return// this.popup.close()},/*** 点击取消按钮*/closeDialog() {this.$emit('close')// 这个是真正的关闭弹框操作 --- 原生是打开的 我们需要手动注释掉// if (this.beforeClose) return// this.popup.close()},close() {this.popup.close()}}
}
</script><style lang="scss" scoped>
.uni-popup-dialog {width: 300px;border-radius: 15px;background-color: #fff;
}.uni-dialog-title {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;justify-content: center;padding-top: 15px;padding-bottom: 5px;
}.uni-dialog-title-text {font-size: 16px;font-weight: 500;
}.uni-dialog-content {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;justify-content: center;align-items: center;padding: 5px 15px 15px 15px;
}.uni-dialog-content-text {font-size: 14px;color: #6e6e6e;
}.uni-dialog-button-group {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;border-top-color: #f5f5f5;border-top-style: solid;border-top-width: 1px;
}.uni-dialog-button {/* #ifndef APP-NVUE */display: flex;/* #endif */flex: 1;flex-direction: row;justify-content: center;align-items: center;height: 45px;
}.uni-border-left {border-left-color: #f0f0f0;border-left-style: solid;border-left-width: 1px;
}.uni-dialog-button-text {font-size: 14px;
}.uni-button-color {color: #007aff;
}.uni-dialog-input {flex: 1;font-size: 14px;border: 1px #eee solid;height: 40px;padding: 0 10px;border-radius: 5px;color: #555;
}.uni-popup__success {color: #4cd964;
}.uni-popup__warn {color: #f0ad4e;
}.uni-popup__error {color: #dd524d;
}.uni-popup__info {color: #909399;
}
</style>
<style lang="less" scoped>
.li {overflow: hidden;display: flex;padding: 5px 15px 15px 15px;height: 120rpx;line-height: 120rpx;.left-box {width: 120rpx;font-size: 28rpx;}.right-box {flex: 1;}
}
</style>

5.弹框必须引入的popup.js

在这里插入图片描述


export default {data() {return {}},created(){this.popup = this.getParent()},methods:{/*** 获取父元素实例*/getParent(name = 'uniPopup') {let parent = this.$parent;let parentName = parent.$options.name;while (parentName !== name) {parent = parent.$parent;if (!parent) return falseparentName = parent.$options.name;}return parent;},}
}

以上代码可以直接复制使用，但是前提是uni-app的项目，且组件的引入要正确！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/403588.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

uni-app自定义tabBar；uni-app小程序自定义tabBar；uni-app小程序修改中间tabBar导航栏大小；uni-app中间导航栏凸起；uni-app修改底部导航栏

uni-app自定义tabBar；uni-app小程序自定义tabBar；uni-app小程序修改中间tabBar导航栏大小；uni-app中间导航栏凸起；uni-app修改底部导航栏

需求&#xff1a;要求小程序&#xff0c;中间的tabBar自定义凸起或者图标变大&#xff1b; 问题&#xff1a;查看uni-app的tabBar文档可知&#xff0c;小程序是不支持midButton的&#xff1b; 解决思路&#xff1a;隐藏uni-app原有的tabBar&#xff0c;然后换成自己手写的导航…
阅读更多...
jq localStorage

jq localStorage

$(function () {if(!window.localStorage){alert("浏览器不支持localstorage");return false;}else{var storagewindow.localStorage;$(#headerA li).eq(2).addClass(active)}})
阅读更多...
c++中BOOL和bool的区别

c++中BOOL和bool的区别

From: http://blog.csdn.net/zhongguoren666/article/details/8472805 一&#xff1a;在网上找到了BOOL和bool的区别&#xff1a; 1、类型不同 BOOL为int型 bool为布尔型 2、长度不同 bool只有一个字节 BOOL长度视实际环境来定&#xff0c;一般可认为是4个字节 3、取值不同 bo…
阅读更多...
常见端口列表

常见端口列表

常见端口列表TCP端口7 回显9 丢弃11 在线用户13 时间服务15 网络状态17 每日引用18 消息发送19 字符发生器20 ftp数据21 文件传输22 SSH端口23 远程终端25 发送邮件31 Masters Paradise木马37 时间39 资源定位协议41 DeepThroat木马42 WINS 主机名服务43 Wh…
阅读更多...
[JavaScript] DOM操作技术

[JavaScript] DOM操作技术

1. 动态脚本使用<script>元素可以向页面中插入JavaScript代码&#xff0c;一种方式是通过src属性包含外部文件&#xff0c;另一种方式是用这个元素本身来包含代码。动态脚本指在页面加载时不存在&#xff0c;但将来某时通过修改DOM动态添加的脚本。动态加载的外部JavaScr…
阅读更多...
uni-app小程序 点击页面滚动到指定位置

uni-app小程序 点击页面滚动到指定位置

uni.pageScrollTo({scrollTop: 0,duration: 300,})
阅读更多...
mysql Connector C/C++ 多线程封装

mysql Connector C/C++ 多线程封装

From: http://blog.csdn.net/educast/article/details/14163519 在网上找了好久&#xff0c;有很多封装&#xff0c;但是感觉对多线程处理的不多&#xff0c;都不是很理想。封装完的第一个版本&#xff0c;想法比较简单&#xff0c;使用一个单例模式&#xff0c;对应一个连接&a…
阅读更多...
工业控制系统专业术语（不断完善中）

工业控制系统专业术语（不断完善中）

1、DCS &#xff08;Distributed Control System&#xff09;分布式控制系统。主要应用于石油、化工、电力等。2、SCADA (Supervisory Control And Data Acquisition)数据采集与监控&#xff0c;广泛用于电力系统、电气化铁道、风力发电。3、PLC&#xff08; Programmable Logi…
阅读更多...
uni-app微信小程序image引入图片；background-image背景图引入图片；小程序预览本地图片；小程序图片过大引入报错；获取本地图片的网络地址；

uni-app微信小程序image引入图片；background-image背景图引入图片；小程序预览本地图片；小程序图片过大引入报错；获取本地图片的网络地址；

uni-app小程序图片使用有image标签和background-image背景图两种方式&#xff1a; 下有获取本地图片的网络地址方式&#xff1a;见第四步 一、方式一&#xff1a;使用image标签引入&#xff1a; uni-app官方image 1.官方文档说&#xff1a;src 仅支持相对路径、绝对路径&…
阅读更多...
微商小程序加人加粉推广平台二维码

微商小程序加人加粉推广平台二维码

微商加人推广平台丨微商加粉推广平台丨微商拼团丨微商产品推广。
阅读更多...
基于MysqlConnector/C++的数据库连接池的实现

基于MysqlConnector/C++的数据库连接池的实现

From: http://blog.csdn.net/educast/article/details/14164097 1.连接池的介绍&#xff1a; 1.1应用背景&#xff1a; 一般的应用程序都会访问到数据库&#xff0c;在程序访问数据库的时候&#xff0c;每一次数据访问请求都必须经过下面几个步骤&#xff1a;建立数据库连接&a…
阅读更多...
【javascript】不刷新页面，实时显示当前时间

【javascript】不刷新页面，实时显示当前时间

这里起主要作用的是setTimeout这个函数。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml"><head>…
阅读更多...
mac安装vue-cli脚手架；脚手架安装报错Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules

mac安装vue-cli脚手架；脚手架安装报错Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules

阅读更多...
PCL Show Point Cloud 显示点云

PCL Show Point Cloud 显示点云

在使用PCL库的时候&#xff0c;经常需要显示点云&#xff0c;可以用下面这段代码&#xff1a; #include <pcl/visualization/cloud_viewer.h>pcl::PointCloud<pcl::PointXYZRGB>::Ptr cloud; pcl::visualization::CloudViewer viewer ("Viewer"); viewer…
阅读更多...
css字体自定义，bootstrap自定义字体

css字体自定义，bootstrap自定义字体

<style type"text/css">font-face{font-family:myFont;src:url(/bootstrap-3.3.7-dist/fonts/shishangjianti.ttf);}body{font-family: myFont !important;}</style> .ttf的文件路径根据文件位置定义
阅读更多...
cmd连接mysql的方法详解

cmd连接mysql的方法详解

From: http://www.jb51.net/article/38059.htm 本篇文章是对cmd连接mysql的方法进行了详细的分析介绍&#xff0c;需要的朋友参考下连接&#xff1a;mysql -h主机地址 -u用户名 &#xff0d;p用户密码 &#xff08;注:u与root可以不用加空格&#xff0c;其它也一样&#xff09;…
阅读更多...
c/c++多参数的问题

c/c++多参数的问题

C/C语言有一个不同于其它语言的特性&#xff0c;即其支持可变参数&#xff0c;典型的函数如printf、scanf等可以接受数量不定的参数。如&#xff1a; printf ( "I love you" ); printf ( "%d", a ); printf ( "%d,%d", a, b );第一、二、三个pr…
阅读更多...
JS node 后端签名前端文件直传ali-oss解决方案

JS node 后端签名前端文件直传ali-oss解决方案

1&#xff1a;首先打开跨域 上面搞好了开始写代码 html <input type"file" id"upload" onchange"uploadfile()"> js function uploadfile() {var file document.getElementById(upload).files[0]$.ajax({url: /policy,data: ,type: get…
阅读更多...
MAC电脑使用vue-cli脚手架搭建vue项目；mac使用脚手架vue-cli搭建vue项目

MAC电脑使用vue-cli脚手架搭建vue项目；mac使用脚手架vue-cli搭建vue项目

windows搭建vue项目看这篇
阅读更多...
在linux上获得线程id的方法

在linux上获得线程id的方法

From: http://www.linuxidc.com/Linux/2014-01/94723.htm 我使用了第二种方法&#xff0c;很方便&#xff1a; #define gettid() syscall(__NR_gettid) 用到的地方 gettid() 在linux2.4版本后&#xff0c;linux使用了NPTL作为自己的线程库&#xff0c;为了兼容POSIX标准&a…
阅读更多...
最新文章

Copyright @ 2022~2023