uniapp基础知识点掌握以及面试题整理
发布时间：2023-02-16 13:04:49 所属栏目：Java 来源：互联网
导读：uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,下面这篇文章主要给大家介绍了关于uniapp基础知识点掌握以及面试题整理的相关资料,需要的朋友可以参考下 1.uniapp优缺点 优点: a. 一套代码可以生成多端 b. 学习成本低,语法是vue的,组件
|
19.uni.request封装 详情可以看我之前写的封装uniapp request 封装及使用思想 20.uniapp实现下拉刷新 实现下拉刷新需要用到uni.onPullDownRefresh和uni.stopPullDownRefresh这个两个函数，函数与生命周期同等级可以监听页面下拉动作 //1.在pages.json文件里找到需要下拉刷新的页面pages节点，并在 style 选项中开启enablePullDownRefresh。 { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "enablePullDownRefresh": true } }, //2.在页面中调用监听下拉事件函数 onPullDownRefresh() { //do some this.Fn() } //3.获取数据完毕后调用停止下拉刷新动画 Fn(){ //可以在调用的函数中获取接口数据或则操作其他事项 //调取完毕后停止下拉刷新动画 uni.stopPullDownRefresh(); } 21.uniapp实现上拉加载 uniapp中的上拉加载是通过onReachBottom()这个生命周期函数实现，当下拉触底时就会触发。我们可以在此函数内调用分页接口请求数据，用以获取更多的数据 onReachBottom() { let data = this.data; let pageNum = data.pageNum; let pageStatus = 'loadmore'; if (data.pageNum * data.pageSize >= data.pageTotal) { pageStatus = 'nomore'; } if (pageStatus === 'loadmore') { pageNum++; pageStatus = 'loading'; this.setData({ pageNum: pageNum }, () => { this.getDataList(); }) } this.setData({pageStatus}) }, /*我司的做法是用total来判断是否还有数据可以请求，还有的话就继续请求接口数据，并更新状态及分页数据； 22.scroll-view吸顶问题 问题： scroll-view 是常会用到的一个标签，我们可以使用 position:sticky 加一个边界条件例如top:0 属性实现一个粘性布局，在容器滚动的时候，如果我们的顶部标签栏触碰到了顶部就不会再滚动了，而是固定在顶部。但是在小程序中如果你在scroll-view元素中直接为子元素使用sticky属性，你给予sticky的元素在到达父元素的底部时会失效。 解决： 在scroll-view元素中，再增加一层view元素，然后在再将使用了sticky属性的子元素放入view中，就可以实现粘贴在某个位置的效果了 23.ios输入框字体移动bug 问题： 在IOS端有时，当输入框在输入后没有点击其他位置使输入框失焦的话，如果滚动窗口内部的字体也会跟着滚动 解决: // 更改后的输入框, //1、尝试了下，发现textarea不会和input一样出现字体随着页面滚动的情况，这是一个兼容方案 //2、还有个不优雅的方案是输入完成后使用其他事件让其失焦或者disable，例如弹窗或者弹出层出来的时候可以暂时让input禁止，然后弹窗交互完成后再放开 <textarea fixed="true" auto-height="true" ></textarea> /** * 设置拼接后的参数 * @param {String} data 参数 * @return {String} */ setPageParam(data) { let url = ''; for (let k in data) { let value = data[k] !== undefined ? data[k] : ''; if (typeof value === 'object') { value = JSON.stringify(value) } url += '&' + k + '=' + encodeURIComponent(value); } url = url ? url.substring(1) : ''; return url }, /** * 跳转到下一个页面 * @param {String} url 跳转页面的名称 * @param {Object} param 跳转页面的传参 * @return null */ jumpPage(url, param) { if (!url) { return } let arrSwitch = ['/pages/index/index'];//tab页面数组 if (arrSwitch.includes(url)) { return uni.switchTab({//tab页面需要uni.switchPage跳转 url }) } if (param) { url += (url.indexOf('?') < 0 ? '?' : '&') + this.setPageParam(param);//拼接参数 } if (getCurrentPages().length > 9) { return uni.redirectTo({//如果栈满或者溢出就重定向 url }) } else { uni.navigateTo({ url }) } }, （编辑：十堰站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
