前端开发uni-app初体验

Posted 2021-03-30 星河YE2021

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发uni-app初体验相关的知识，希望对你有一定的参考价值。

铁汁们，带你们趟一趟uni-app的浑水

经过一周的折腾公司还是决定开发app，但是只能前端开发，道路艰难，还是走上了uni-app的道路，虽然早有耳闻也经历过一些实战但是都是微信小程序跟H5，还没有用uni-app开发过手机应用。于是出于没经历过的态度决定干！

开发工具

HBuilderX-Alpha:

工具里可以直接集成所需要的项目及项目环境。还是挺方便的，插件类的可以直接在工具里集成下载。

开发框架

uni-app:

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到ios、android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。(官网介绍)

仔细一看还是挺唬人的，但是开发过程中会有很多的坑需要去踩。

开发过程

如果开发过vue跟微信小程序的朋友们上手也是很快的，在我看来就是结合了微信小程序的结构以及vue的写法那就是uni-app了。

1. uni-app之选项卡切换

* tab滑动切换

* 下拉刷新
* 上拉分页加载

在写的过程中遇到的一些问题:

由于swiper 组建的原因需要给内容部分写一个固定高度所以对于无限加载的数据只能加载一次获取元素的高度并且赋值。

结构是使用的uni自带的组建 swiper 结合业务逻辑结构如下:

<!-- 切换标签 --><view class="content_header"> <p :class="index == 0?'select':''" @click="selectFun(0,)">关注 <span v-if="index == 0"></span></p> <p :class="index == 1?'select':''" @click="selectFun(1,)">推荐 <span v-if="index == 1"></span></p> <p :class="index == 2?'select':''" @click="selectFun(2,)">最新 <span v-if="index == 2"></span></p></view><!-- 内容部分 --><swiper class="swiper" :style="{height:scrollHeight+'px'}" :indicator-dots="indicatorDots" :autoplay="autoplay" @change="swiperFun" :current="index">      <swiper-item> <scroll-view class="content_mian content_mian0" scroll-y="true" :refresher-triggered="triggered" :refresher-enabled="isOpen" :refresher-threshold="100" refresher-background="#F7F8F9" @refresherrefresh="onRefresh" @refresherrestore="onRestore"> <view class="content_list" v-for="(item,index) in listArr"> 内容部分 </view> </scroll-view> </swiper-item><swiper>

由于也结合了小程序的所以上拉分页可以直接使用onReachBottom方法～

实现方法如下：

// 点击tabselectFun: function(index){ let that = this; that.index = index;},
// 滑动tabswiperFun: function(e) { let that = this; that.index = e.detail.current; that.scrollHeightFun('.content_mian'+e.detail.current);},
// 获取高度 // className方法传入的需要获取高度元素的classscrollHeightFun(className){ let info = uni.createSelectorQuery().in(this).select(className).boundingClientRect(); info.exec(res => { this.scrollHeight = res[0].height; console.log(this.scrollHeight) })},
// 下刷新系列onPulling(e) { console.log('触发下拉');},// 释放刷新接口onRefresh() { this.triggered = true; // 需要重置 this.onRestore(); this.listArr = []; setTimeout(() => { page.p = 1; this.listFun(page.p); }, 500)},// 刷新完成复位onRestore() { this.triggered = 'restore'; // 需要重置 console.log("复位");},
// 上拉加载onReachBottom(){ this.utils.ToastLoading(); setTimeout(() => { page.p = page.p+1; this.listFun(page.p); }, 300)},