uni-app开发
uni-app开发相关的记录与注意事项
CHH5431
公众号:xssy5431 小拾岁月
展开
-
uni-app开发(1)---首页顶部导航与内容联动
APP项目首页往往会出现顶部导航与下面内容部分联动的需求,具体需求与效果图如下:业务需求:(1)点击顶部导航后,下面内容部分自动滚动。(2)滑动内容部分后,顶部导航自动选中分类。效果图:逻辑分析:顶部导航使用,scroll-view标签,选中的分类添加active类名,声明选中的分类索引为tabIndex。下面内容部分,使用swiper标签,当前展示的内容的curren...原创 2019-09-16 21:52:04 · 1767 阅读 · 1 评论 -
uni-app开发(2)---上拉加载组件封装
PC对数据处理可以使用分页,移动端通常是使用上拉加载处理。但是这个上拉加载在很多地方都是会使用的,所以需要我们抽里程组件。应用场景:在列表部分,使用上拉加载,这个时候需要使用scrolltolower上拉触底事件,具体的代码如下:<scroll-view scroll-y class="list" @scrolltolower="loadMore(index)"> &l...原创 2019-09-16 22:55:36 · 1265 阅读 · 0 评论 -
uni-app开发(3)---搜索组件开发
1、应用场景:在APP开发的时候,我们往往会遇见点击前一页index.vue搜索框(不能输入)进入新的search.vue页面,但是搜索框可以输入的情况。2、配置问题首页index.vue页面配置"style": { "app-plus": { "scrollIndicator": "none", //隐藏滚动条 "bounce": "none", //关闭...原创 2019-09-17 10:08:18 · 2364 阅读 · 0 评论 -
uni-app开发(4)---自定义导航栏开发
第1步:配置页面"app-plus": { "scrollIndicator": "none", //隐藏滚动条 "bounce": "none", //关闭反弹效果 "titleNView": false}注意:"titleNView": false配置可以禁用导航栏。第2步:引入官方组件uni-icon、uni-nav-bar、uni-status-bar备注:uni...原创 2019-09-17 11:44:39 · 7689 阅读 · 0 评论 -
uni-app开发(5)---上传多图组件开发
在开发发表日志、博客之类的功能时,往往用到上传组件上传一张或者多张图片,功能需求及效果图如下:效果图:需求:在点击上传标志时,可以选择拍照或者手机相册上传,点击右上角的删除按钮,可以删除当前上传的图片。代码分析HTML<view class="uni-list list-pd"> <view class="uni-list-cell cell...原创 2019-09-21 22:04:33 · 2682 阅读 · 1 评论 -
uni-app开发(6)---弹出层开发与草稿保存开发
一、弹出层组件开发弹窗在开发中是一种很常见的组件,uni-app内部已经了组件。在开发过程中,我们只需要引入官方的组件即可。使用的过程大致如下:第一步:引入uni-popup组件。import uniPopup from '@/components/uni-popup/uni-popup.vue'第二步:在父组件中注册,并使用。<uni-popup :show="sh...原创 2019-09-21 22:13:00 · 4614 阅读 · 1 评论 -
uni-app开发(6)---项目运行到小程序性能提升
uni-app项目运行到小程序端,不会应用自定义组件,在uni-app升级到1.8版本后,会在小程序页面的json文件中显示自定义组件。具体的配置步骤如下:开发者可在manifest.json的源码视图里配置,manifest.json->mp-weixin->usingComponents切换编译模式,如下:// manifest.json { ...原创 2019-09-22 13:15:41 · 1208 阅读 · 0 评论 -
uni-app开发(7)---兼容多类型DOM结构组件封装
在页面列表结构中,公共组件可以封装使用。但是,公共组件中类型可能有很多种,比如:文本、图文、视频、分享等等不同类型,我们在进行公共组件开发的时候,没有必要根据类型封装多个组件,我们只需要封装一个组件,其中根据不同类型使用多个template根据类型编译即可。代码结构如下:<view class="u-f-ajc"> <!-- 图片 --> <templa...原创 2019-09-22 19:15:06 · 485 阅读 · 0 评论