uniapp 小程序
uniapp 小程序
Python User
这个作者很懒,什么都没留下…
展开
-
uni-app 手指滑动事件介绍+ 实现判断手指左右滑动组件的封装
一,手指滑动操作的原理手指在屏幕上产生了移动:手指按下屏幕事件 touchstart;手指离开屏幕事件 touchend;手指在屏幕上的坐标 event.changedTouches[0].clientX 和 clientY手指在屏幕上的时间不能太长记录下手指按下的时间 Date.now()记录下手指离开的时间 Date.now()在手指离开的时候做减法运算,求时间差根据坐标判断滑动的位置代码示例1,定义两个触发事件<view class="touch" @touch原创 2021-01-10 21:52:37 · 8028 阅读 · 2 评论 -
uni-app 点击从信息列表页面跳转到详情页面两种方式+点击添加缓存
1,在navigator 中使用变量绑定 url 的链接跳转这里的 ${index} 为每个信息的的特有标识,将index传递给详情页 <navigator v-for="(item, index) in 5" :key="index" class="lists" :url="`/pages/detail/index?id=${index}`"> <view class="picContnt">原创 2021-01-08 23:46:53 · 8361 阅读 · 1 评论 -
uni-app 实现下拉 懒加载的两种方式
实现下拉加载使用scroll-view 标签充当分页容器;绑定滚动条触底事件 scrolltolower;实现下拉加载逻辑;1,新建 scroll-view 标签,指定方向,触底函数;<!-- 如果用小程序原生,bindscrolltolower=""handle --><scroll-view scroll-y @scrolltolower="handle" class="scrollHeight"> <view v-for="(item, index) i原创 2021-01-08 21:52:12 · 3309 阅读 · 0 评论 -
uni-app 优化数据加载时候的闪屏问题
在访问一个页面的时候可能会出现某些 dom 一闪而过的情况,但此时数据还并未加载;这个时候须得将其做一个判断,判断有数据的时候再显示;<template> <!-- 有数据的时候再显示,解决了闪屏的问题 --> <view v-if="datas.length>0"> </view></template>data(){ return { datas:[] // 请求接口后返回的数据 }}...原创 2021-01-08 16:59:33 · 4002 阅读 · 0 评论 -
uni-app 用moment.js 库处理时间戳
点击官方文档cnpm i moment -Simport moment from 'moment'moment(xxx).format("YY MM DD")原创 2021-01-08 16:48:13 · 924 阅读 · 0 评论 -
uni-app 用Promise 封装项目异步请求
为什么要封装?原生的请求不支持Promise,只能使用 .then() 的方式;uni-app 的请求不能方便的添加 “请求中” 的效果,也就是等待中。。。的特效;uni-app 的请求值是个数组,不方便;封装思路基于原生Promise 封装;挂载到Vue 原型上;通过 this.request 的方式来请求;1,在和pages同级目录下新建 utils 文件夹,新建request.js文件,在文件中封装Promiseexport default (params)=>{原创 2021-01-08 16:40:27 · 2956 阅读 · 1 评论 -
uni-app 小程序分段器tab 的 实现
效果图如图1,写好四个要展示的组件注意:组件的命名一定要规范,例如home-XXX,XXX 一定要写英文不能乱写,否则不能显示组件;2,进行展示<home-recommend></home-recommend><home-category></home-category><home-new></home-new><home-album></home-album>3,引入uni-ui 的分段器原创 2021-01-08 13:41:52 · 1639 阅读 · 0 评论 -
uni-app 中uni-api的初步讲解
小程序原生请求:wx.request({ url:'', data:{}, success: function(res){ }})使用uni-api 来请求:uni.request({ url:'', data:{}, success: function(res){ }})具体请点击查看官方文档原创 2021-01-08 13:08:44 · 826 阅读 · 0 评论 -
uni-app 框架 uni-ui 的安装 和 使用(初步)
安装点击查看里面的 方式2 安装cnpm i @dcloudio/uni-ui -S使用点击查看UI 组件的使用在要使用的page页面中引入:import { uniBadge } from '@dcloudio/uni-ui' export default { components: { uniBadge } }在 wxml 中试一下:<uni-badge text="ninin" type="success"></uni-badge&原创 2021-01-08 00:02:04 · 2574 阅读 · 1 评论 -
uni-app 引入线上的阿里 iconfont图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法在App.vue 中引入1, 选择一个图标,然后添加到库;2, 添加至项目3,然后再我的项目中将他下载到本地4,下载后的文件如图,找到 iconfont.css,复制文件中所有代码5,复制以后在小程序项目中建一个 iconfont.wxss,粘贴到 iconfont.wxss 中6,然后在 App.vue原创 2021-01-07 23:42:30 · 718 阅读 · 0 评论 -
uni-app 配置tabber底部导航栏
"tabBar": { "color": "#444", "selectedColor": "#219bf3", "backgroundColor": "#e0e0e0", "borderStyle": "white", "position": "bottom", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/icon/home.png",原创 2021-01-07 23:03:42 · 182 阅读 · 0 评论 -
uni-app 的生命周期
uni-app 的生命周期主要从三个角度来讲:App全局(应用生命周期),pages页面(页面生命周期),components中组件(组件生命周期)1,全局的,在App.vue中具体查看文档export default { onLaunch: function() { // 整个应用启动的时候触发 console.log('App Launch') }, onShow: function() { // 打开应用(切换到小程序了) console.log('App Show')原创 2021-01-06 23:59:10 · 149 阅读 · 1 评论 -
uni-app 的组件的基本使用
组件的基本使用定义组件:在src 下新建一个components文件夹,写组件;引入组件:使用import 引入组件,@代表src 路径;注册组件:在对应的实例中注册组件;使用组件:不写大小驼峰式,也可以写 <img-border></img-border>组件的传参1,父组件给子组件传参在父组件中,给子组件绑定一个数据<child :datas="[1,2,3,4]"></child>子组件中通过props 接受props: {原创 2021-01-06 23:42:14 · 1315 阅读 · 0 评论 -
uin-app 的基本语法
基本语法: 数据展示,数据循环,条件编译,计算属性;1,数据的展示<view :data-color="color">{{ color }}</view>2,数据的循环<view v-for="(item, index) in datas" :key="index">{{ item }}</view>3,条件编译<view v-if="true">{{ color }}</view><view v-show="f原创 2021-01-06 22:16:59 · 279 阅读 · 0 评论 -
uni-app开发中 样式 和 sass
样式支持:rpx 和 h5的 vw,vh;使用 sass 需要下载:cnpm i node-sass node-loader;使用 <style lang="scss">便可以引用uni.scss 文件的内容:原创 2021-01-06 00:08:02 · 183 阅读 · 1 评论 -
uni-app 项目目录
src目录介绍:原创 2021-01-05 23:08:08 · 131 阅读 · 1 评论 -
小程序开发:通过vue-cli 搭建 uniapp -----小程序项目
要求安装vue-cli3以上的版本2.9.6 初始化项目是用 vue init webpack my-project 3.0以上 初始化项目是用 vue create my-project3.0以下 npm install -g vue-cli@版本号3.0以上 npm install -g @vue/cli@版本号步骤:创建脚手架:npm install -g @vue/cli;若失败就安装:npm i -g @vue/cli@^3.12.1创建项目:vue create -p原创 2021-01-05 22:59:45 · 2588 阅读 · 0 评论