原因:原生的uni-tabbar在手机端app没有完全隐藏,导致遮住了自定义的底部导航栏
解决:把uni-tabbar隐藏就行了
.uni-app--showleftwindow + .uni-tabbar-bottom {display: none;
}
使用插件video组件会覆盖页面其他非原生组件的设计替代方案示例 - DCloud 插件市场
下载mock
npm install better-mock
在根目录下创建mock目录,并且在mock下创建index.js
index.js 内容
import Mock from 'better-mock/dist/mock.mp.js'
let Random = Mock.Random
//注册全局mock可生成随机数据
Random.extend({//生成0-32的随机数字 number: function () {return Math.floor(Math.random() * 32)},//生成0或1 指代性别gender: function() {return Math.round(Math.random())}
})
const modules = import.meta.glob("../mock/*.js", {eager: true
});
const mockModules = [];
function param2Obj(url) {const search = url.split('?')[1]if (!search) {return {}}return JSON.parse('{"' +decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"').replace(/\+/g, ' ') +'"}')
}
function XHR2ExpressReqWrap(respond) {return function(options) {let result = nullif (respond instanceof Function) {const { body, type, url } = optionsresult = respond({method: type,body: JSON.parse(body),query: param2Obj(url)})} else {result = respond}return Mock.mock(result)}
}
Object.keys(modules).forEach(key => {if (key === './index.js') return;modules[key].default.forEach(item => {let {url,type,response} = item;// 注册所有的mock服务Mock.mock(import.meta.env.VITE_FRONT_END_BASE+ url, type, XHR2ExpressReqWrap(response));})
});export default Mock
在main.js注册mock
import Vue from 'vue'
import mock from './mock/index.js'const app = new Vue({mock
})
在mock下面创建模拟请求js就行了
比如创建一个获取10条数据的js
import Mock from 'better-mock/dist/mock.mp.js'
let Random = Mock.Random
let api = '/api/interaction'
Random.extend({avatars: function () {var array = ['https://wdz-1258450135.cos.ap-shanghai.myqcloud.com/layuibokemoban/images/theshy.jpg','https://wdz-1258450135.cos.ap-shanghai.myqcloud.com/headphotos/2090b23c9203af81','https://wdz-1258450135.cos.ap-shanghai.myqcloud.com/img/005288b562bb40f4a5335565f6398607.jfif','https://thirdwx.qlogo.cn/mmopen/vi_32/2aJ2mcr4LCfGHLo93Dd4vhWVcW0k9ICkrNYTTNxic44sdDpYxaqEBwD27OrlMEEwayIQJCibcOah6iaQmVf9MAHbA/132']return this.pick(array)}
})
export default [{url: api+'/gets',type: 'get',response: config => {return {"code": 1,"msg": "查询成功","data|10": [{'id|+1': 1,name: '@cname',avatar: '@avatars',title: '@title',level: '@number',target: '@title',target_type: '@number',content: '@cparagraph',createDate: '@datetime',audio: 'https://wdz-1258450135.cos.ap-shanghai.myqcloud.com/video/WeChat_20230311081721.mp4',posterUrl: '@avatars',shares: '@number',comments: '@number',praises: '@number',province: '@province'}]}}
}]
在域名下面访问 /api/interaction/gets就可以获取到10条随机数据了