找回密码

开发笔记

记录了我开发过程中遇到的问题和资料

uni-app 页面顶部栏固定悬浮的 css 兼容方法 - DCloud问答

mikel阅读(15)

来源： uni-app 页面顶部栏固定悬浮的 css 兼容方法 – DCloud问答

uni-app 中 NavigationBar（导航栏 44px）以及 TabBar（底部选项卡 50px）组件的高度是固定的，不可修改，各小程序平台，包括同小程序平台的 iOS 和 Android 的高度也不一样。

泪雪博客

那么如果我们需要悬浮导航菜单则需要使用 position: sticky 来使其悬浮，然后对于 H5 平台加上 top:44px 的高度，这样 uni-app 页面顶部导航栏的固定悬浮就实现了兼容，具体的代码如下：

复制代码.menu {  
    position: sticky;  
    /* #ifdef H5 */  
    top: 44px;  
    /* #endif */  
    /* #ifndef H5 */  
    top: 0;  
    /* #endif */  
    z-index: 999;  
    flex: 1;  
    flex-direction: column;  
    overflow: hidden;  
    background-color: #ffffff;  
}

以上代码纯属子凡开发中简单的需要稍微注意的地方，仅供大家学习参考。

其中 position: fixed 虽然也可以悬浮固定，但是底部的元素就无法继承 top 的值了，可以简单说 fixed 是特殊版的 absolute，fixed 元素总是相对于 body 定位的。所以就需要使用 position: static，static(没有定位)是 position 的默认值，元素处于正常的文档流中，会忽略 left、top、right、bottom 和 z-index 属性。

除非注明，否则均为泪雪博客原创文章，禁止任何形式转载

本文链接：https://zhangzifan.com/uni-app-navigationbar-position-static.html

uniapp 添加顶部搜索导航_typeerror: uni.onnavigationbarsearchinputclicked i-CSDN博客

mikel阅读(22)

来源： uniapp 添加顶部搜索导航_typeerror: uni.onnavigationbarsearchinputclicked i-CSDN博客

（记得提前引入字体样式）
1.在 pages.json里面配置搜索界面（这里member为主页）：
{
            “path” : “pages/member/member”,
            “style” : {
“app-plus”:{
“scrollIndicator”:”none”,//隐藏滚动条
“titleNView”:{
//搜索框配置
“searchInput”:{
“align”:”center” ,//居中
“backgroundColor”:”#f7f7f7″,
“borderRadius”:”50rpx”,
“placeholder”:”请搜索文字”,
“placeholderColor”:”red”,   //默认字体颜色
“disabled”:true    //不希望输入文本
},
//左右2个按钮
“buttons”:[
//左边图标
{
“color”:”#FF9619″,
“colorPressed”:”#BBBBBB”,
“float”:”left”,
“fontSize”:”40px”   ,//文字大小
“fontSrc”:”/static/font/icon.ttf”,
“text”:”\ue609″
},
//右边图标
{
“color”:”#000000″,
“float”:”right”,
“fontSrc”:”/static/font/icon.ttf”,
“text”:”\ue653″
}
]
}
}
}
        },
2.在主页member.vue    加入监听搜索框点击事件，当点击搜索导航就会跳转到搜索页
//监听搜索框点击事件
onNavigationBarSearchInputClicked(){
// console.log(“打开搜索页”)
//跳转到搜索页
uni.navigateTo({
url:”../search/search”
})
},
遇到问题：如果没有加入参数”disabled”:true    则不能跳转
3.搜索页布局配置(在 pages.json里面)
{
            “path” : “pages/search/search”,
            “style” : {
“app-plus”:{
“scrollIndicator”:”none”,//隐藏滚动条
“titleNView”:{
“autoBackButton”: false, //去掉返回按钮，未生效bug
//搜索框配置
“searchInput”:{
“align”:”left” ,
“backgroundColor”:”#f7f7f7″,
“borderRadius”:”50rpx”,
“placeholder”:”请搜索文字”,
“placeholderColor”:”red”,   //默认字体颜色
“disabled”:false
},
“buttons”:[
//取消按钮
{
“color”:”#000000″,
“float”:”right”,
“fontSize”:”40rpx”,
“text”:”取消”
}
]
}
}
}
        }
4.点击取消按钮，返回到上一层（在search.vue中配置）
<script>
export default{
data(){
return{
};
},
//监听原生标题导航点击事件
onNavigationBarButtonTap(e){
if(e.index==0){
uni.navigateBack({
delta:1
})
}
},
}
</script>
5.2个监听事件接口  search.vue中修改（//监听搜索框文本变换，监听点击搜索按钮事件）
<script>
export default{
data(){
return{
};
},
//监听原生标题导航点击事件
onNavigationBarButtonTap(e){
if(e.index==0){
uni.navigateBack({
delta:1
})
}
},
//监听搜索框文本变换
onNavigationBarSearchInputChanged(e) {
console.log(“监听文本搜索变化”+JSON.stringify(e.text))
},
//监听点击搜索按钮事件
onNavigationBarSearchInputConfirmed(e) {
console.log(“监听点击搜索事件”+JSON.stringify(e.text))
}
}
</script>
————————————————
                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_45200726/article/details/108616708

uni.switchTab()跳转不刷新页面问题_currentpage.onload is not a function-CSDN博客

mikel阅读(33)

来源： uni.switchTab()跳转不刷新页面问题_currentpage.onload is not a function-CSDN博客

uni.switchTab()跳转不刷新页面问题

大家应该都遇到过,调转到 tabBar 里面的页面时，只能使用 uni.switchTab() 或者是 uni.navigator() 跳转，
使用 uni.reLauch() 或者是 uni.redirect() 无效，但是她们都存在一个共同的问题，就是，无法刷新页面和数据，uni.switchTab() 后面也是不可以带参数的，带参数无效，接下来就告诉大家我试了很多方法得出的结论。

我是需要从修改个人中心跳转到个人中心界面，

相信大家很多人百度这个问题，解决方案都是点击按钮时

但是页面会报错 page.onLoad is not a function 并且不会请求接口，所以页面无法刷新

 

还有人会使用 this.$forceUpdate()； 但是页面并不会刷新，在vue脚手架中确实可以刷新页面，但是uniapp中没有效果
最后的解决方案，就是在跳转的时候，调用
window.location.reload();

 

这样可以在跳转的同时刷新页面，改代码必须写在要跳转的点击事件里面，放在mounted或者是onLoad里面，会一直刷新页面，出现死循环。
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/qq_43665443/article/details/114398927

uniapp数据存储在本地，获取和移除。_uniapp存储数据到本地-CSDN博客

mikel阅读(34)

来源： uniapp数据存储在本地，获取和移除。_uniapp存储数据到本地-CSDN博客

uniapp数据存储在本地，获取和移除，两种方法，异步和同步，推荐使用同步
html代码
<template>
<view>
<button type=”default” @click=”setStorage”>数据缓存到本地</button>
<button type=”primary” @click=”getStorage”>获取数据</button>
<button type=”warn” @click=”removeStorage”>移除数据</button>
</view>
</template>
数据存储异步
//缓存数据
setStorage(){
//这是一个异步接口
uni.setStorage({
key: ‘id’,//本地缓存中的指定的 key
data: 80//需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
})
},
数据存储同步
//缓存数据
setStorage(){
//这是一个同步接口。建议使用这个方法
//第一个参数本地缓存中的指定的 key
//第二个参数需要存储的内容
uni.setStorageSync(‘id’,100);
},
获取数据异步
getStorage(){
//这是一个异步接口
uni.getStorage({
key:’id’,//本地缓存中的指定的 key
success(res) {//接口调用的回调函数，res = {data: key对应的内容}
console.log(res.data)
}
})
},
获取数据同步
getStorage(){
//这是一个同步接口。建议使用这个方法
//参数本地缓存中的指定的 key通过赋值给一个变量获取
const value = uni.getStorageSync(‘id’);
console.log(value);
},
数据移除异步
removeStorage(){
//这是一个异步接口
uni.removeStorage({
key: ‘id’,//本地缓存中的指定的 key
success(res) {//接口调用的回调函数
console.log(‘移除成功’);
}
})
}
数据移除同步
removeStorage(){
//这是一个同步接口。建议使用这个方法
//参数本地缓存中的指定的 key通过赋值给一个变量获取
const value = uni.removeStorageSync(“id”);
console.log(“移除成功”);
}
id从本地缓存移除
————————————————
                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/abcdebb/article/details/124211243

uniapp底部弹出层(uni-popup)使用技巧_uniapp从底部弹出一个盒子-CSDN博客

mikel阅读(39)

来源： uniapp底部弹出层(uni-popup)使用技巧_uniapp从底部弹出一个盒子-CSDN博客

官网：uni-popup 弹出层 | uni-app官网 (dcloud.net.cn)
底部弹出的使用技巧工作中常用
1.一般app和小程序的弹窗都是在底部弹出，例如：
2.如何实现（简单实用）？
   uni-popup组件，我用vue3的时候是不用引入的，vue2需要先引入到项目中
怎么使用？记得先import导入和 components注册一下， 如何从底部弹出，圆弧怎么搞？
注意： import的文件位置正确，ref绑定的名称和this.$ref.后面的名称一致
<template>
<view>
<button @click=”open”>打开弹窗</button>
<uni-popup ref=”popup” type=”bottom”>
            <view class=”test-popup”>你好,底部弹出</view>
        </uni-popup>
</view>
</template>
<script>
import uniPopup from ‘@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue’
    export default {
        components: {
uniPopup
},
       methods:{
          open(){
            // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持
            //[‘top’,’left’,’bottom’,’right’,’center’]
            this.$refs.popup.open(‘bottom’)//底部弹出
          }
     }
}
</script>
<style lang=”scss”>
    .test-popup{
        background: white;//默认全屏时灰色，只需要把你需要的部分改成白色
        border-radius: 20px;//设置弧度的大小
        height: 200px;
    }
</style>
————————————————
                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/m0_63553261/article/details/136150039

uniapp开发H5兼容APP，踩坑吐血整理_h5与app进行桥接遇到的wenti-CSDN博客

mikel阅读(50)

来源： uniapp开发H5兼容APP，踩坑吐血整理_h5与app进行桥接遇到的wenti-CSDN博客

问题一：uniapp H5 不报错 App报错：TypeError: Cannot read property ‘call’ of undefined 此错误导致程序在真机调试时白屏，但是在H5上时正常的

这个报错的主要原因是小程序分包导致的。当前页面引入其他包的js文件，但是执行当前页面时，js所在的包还未开始编译，就会导致控制台提示call的指向问题。

 

问题二：使用this.$refs.子组件.xxx方法， uniapp:H5正常，APP报错提示 Error in onShow hook (Promise/async): TypeError: Cannot read property xxx of undefined

经过确认了解到 xxx的位置，我是在onshow中调用 子组件的方法 去请求数据，但提示 未找到该方法。初步判断是 页面渲染的执行顺序问题。在真机调试中，生命周期onShow是在页面渲染之前执行的，此时通过this.$refs 拿不到页面的dom,控制台就会提示 “Cannot read property xxx of undefined ” . 将此语句放在 onLoad生命周期中执行，是正常的。

问题三 ： 1.pages.json ——>globalStyle 的 backgroundColor 属性，在app上不生效， 但是在H5 上正常显示的

问题四：ios 在onload生命周期中 拿不到this.$refs.子组件.xxx方法 ，可以写在mounted生命周期中
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/qq_45610622/article/details/129028491

uni-app父子组件间的方法调用及传值_uniapp调用组件内部的方法-CSDN博客

mikel阅读(39)

来源： uni-app父子组件间的方法调用及传值_uniapp调用组件内部的方法-CSDN博客

文章目录
一、父组件调用子组件里的方法
1. 先准备一个子组件
2. 准备一个父组件
二、子组件调用父组件里的方法
2.1. 准备一个父组件
2.2. 在准备一个子组件
三、父组件给子组件传值
3.1. 父组件：
3.2. 子组件：
四、子组件给父组件传值
4.1. 父组件
4.2.子组件
uni-app父子组件间的方法调用及传值
方法调用：
一、父组件调用子组件里的方法
1. 先准备一个子组件
<template>
    <view></view>
</template>
<script>
    export default {
        data(){
            return {}
        },
        methods:{
            childMethod() {  // 子组件中有一个childMethod方法
                console.log(‘childMethod do…’)
            }
        }
    }
</script>
2. 准备一个父组件
<template>
    <view class=”content”>
        <mian-index ref=”mainindex”></mian-index> //使用子组件，ref给子组件一个id标识
    </view>
</template>
<script>
    import mainindex from ‘@/pages/main/index/index.vue’  //引入子组件
    export default {
        data() {
            return {
            };
        },
        components:{
            ‘mian-index’:mainindex
        },
        onLoad(e) {
            this.$refs.mainindex.childMethod();  //页面加载时就调用子组件里的childMethod方法
        }
    }
</script>
参考地址：https://www.cnblogs.com/cap-rq/p/11026881.html
二、子组件调用父组件里的方法
2.1. 准备一个父组件
<template>
   <view class=”father”>
    <child v-on:ToChange=”change”></child>  // 在使用子组件时，通过v-on绑定在父组件内定义好的方法
   </view>
</template>
<script>
   import child from ‘../../components/child’  //引入子组件
   export default {
    …
    methods: {
    change(){  // 在父组件内定义好的方法
    console.log(“触发了父页面内的方法”);
    },
    },
    components:{
    child
    }
   }
</script>
2.2. 在准备一个子组件
<template>
   <view @tap=”changeC()”>  // 在子组件内绑定触发子组件内定义的方法
       子组件
   </view>
</template>
<script>
   export default {
   …
    methods:{
    changeC(type){
    this.$emit(“Tochange”);  // 通过this.$emit触发父组件内绑定的方法
    console.log(“触发了子组件内的方法”);
    }
    }
   }
</script>
参考地址：https://blog.csdn.net/Sport_18/article/details/102833209
传值：
三、父组件给子组件传值
3.1. 父组件：
<template>
<view>
<test :msg=”msg”></test>  // :msg=”msg”绑定传值
</view>
</template>
<script>
import test from “@/components/test/test.vue”  // 引入子组件
export default {
data () {
return {
msg: ‘hello’
}
},
components: {test}
}
</script>
3.2. 子组件：
<template>
<view>
子组件 {{msg}}  //接收后使用
</view>
</template>
<script>
export default {
props: [‘msg’]  //通过props接收数据
}
</script>
<style>
</style>
四、子组件给父组件传值
4.1. 父组件
<template>
<view>
<test @myEvent=”getMsg”></test>
</view>
</template>
<script>
import test from “@/components/test/test.vue”   // 引入子组件
export default {
methods: {
getMsg (res) {
console.log(res)
}
},
components: {test}
}
</script>
4.2.子组件
<template>
<view>
<button type=”primary” @click=”sendMsg”>给父组件传值</button>
</view>
</template>
<script>
export default {
data () {
return {
status: ‘hello uni-app’
}
},
methods: {
sendMsg () {
this.$emit(‘myEvent’,this.status)  // 通过$emit触发事件，第二个参数就是传递的参数
}
}
}
</script>
————————————————
                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_40816738/article/details/124774664

uview2.0 u-number-box 无法输入小数，以及弹起键盘没有小数点 的问题 ！！ 非常简单的解决！！-CSDN博客

mikel阅读(41)

来源： uview2.0 u-number-box 无法输入小数，以及弹起键盘没有小数点 的问题 ！！ 非常简单的解决！！-CSDN博客

当使用该组件的时候发现integer设置为false后，只有step点击+ 或者 – 按钮才会小数的增长，但是真机调试 弹出的键盘时没有小数点的，突然灵光乍现，查看源码发现，input 的type属性一直都是number，所以适当的修改组件库，根据integer的值来动态改变type的值就好啦。！！！

 

上面只是开启了带小数点的键盘，但是你会发现至此，还是无法在input里面输入，仿佛你一输入就会被格式化数据。所以带着疑问查看源码，发现在input事件中有这么一行代码，所以我为了不破坏组件源码的前提下，在外面加了一个是否执行的判断条件，自己加了一个props，

 

至于如何添加的props 太简单了就不用再过多赘述了，如果对此有疑问，欢迎评论区留言
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/m0_57033755/article/details/131259667

uniapp uview u-number-box防抖（商城添加商品有起购）-CSDN博客

mikel阅读(50)

来源： uniapp uview u-number-box防抖（商城添加商品有起购）-CSDN博客

使用uview做防抖，判断小于规定最小值重置为zuixiaozhi
<view class=”goodsSku__bottom__num__car__num”>
<u-number-box :longPress=”false” :disabled-input=”type === 0″ v-if=”show_num” input-height=”70″
input-width=”60″ :min=”1″ size=”25″ v-model=”number” @change=”valChange”></u-number-box>
</view>
 直接改变number.value时，u-number-box在页面上不会直接改变，用一个show_num变量强制刷新组件
function valChange(e) {
let fun = () => {
if (props.data?.min_number && e.value < parseInt(props.data.min_number)) {
show_num.value = false
uni.showToast({
icon: “none”,
title: props.data.min_number + “件起购哦 ~”
})
number.value = props.data.min_number
setTimeout(() => {
show_num.value = true
})
}
}
number.value = e.value
console.log(‘步进器值’, number.value)
globalProperties.$u.debounce(fun, 1000)
}
‘
————————————————
                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/m0_49083276/article/details/132543544

热门标签

C# (813)ASP.NET MVC (619)Android (587)ASP.NET (447)数据库 (299)JavaScript (285)JQuery (221)PHP (210)SQLServer (197)程序开发 (156)架构设计 (155)源价值 (155)SQL (128)Java (111)EasyUi (85)教程 (76)网站 (67)Debug (63)互联网 (63)MySQL (60)Flash (56)搜索优化 (54)创意 (53)SEO (51)ASP.NET MVC3 (51)电子商务 (50)建站经验 (49)实例代码 (49)源码下载 (47)原创 (45)

分类

链接表