uni学习之旅
家里养头小母猪�
这个作者很懒,什么都没留下…
展开
-
uniapp学习之旅跨平台兼容
条件编译,跨端兼容图片来自uniapp官网https://uniapp.dcloud.io/platform条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。写法:以#ifdef或#ifndef加%PLATFORM%开头,以#endif结尾。#ifdef:if defined 仅在某平台存在 #ifndef:if not defined 除了某平台均存在<template> <view> ...原创 2021-05-08 21:33:09 · 164 阅读 · 0 评论 -
uniapp学习之旅上传图片,预览图片
https://uniapp.dcloud.io/api/media/imageuniapp官方文档uni.chooseImage(OBJECT)上传图片uni.previewImage(OBJECT)预览图片代码如下<template> <view> <button type="default" @click="chooseimage">上传图片</button> <image v-for="item in imgArr原创 2021-05-08 21:24:06 · 121 阅读 · 0 评论 -
uniapp学习之旅数据缓存
1.setuni.setStorage 异步uni.setStotageSync 同步2.getuni.getStorage 异步uni.getStorageSync 同步3.removeuni.removeStorage 异步uni.removeStorage 同步 setStorage(){ //uni.setStorage({ // key:'id', // data:80, // succes...原创 2021-05-08 19:55:23 · 131 阅读 · 0 评论 -
uniapp学习之旅 网络请求
get(){ uni.request({ url:"http://localhost:8082/api/getlunbo", success(res) { console.log(res) } }) } <button type...原创 2021-05-08 19:35:30 · 96 阅读 · 0 评论 -
uniapp学习之旅上拉加载
上拉加载首先在页面pages.json中配置页面距离底部的距离{ "path": "pages/list/list", "style":{ "enablePullDownRefresh":true, "onReachBottomDistance":200 } },然后在script中编写响应事件<template> <view> <view >列表页</view> <view原创 2021-05-08 15:14:38 · 45 阅读 · 0 评论 -
uniapp学习之旅下拉刷新
下拉刷新两种方式:1.在pages.json中页面的style中配置{ "path": "pages/list/list", "style":{ "enablePullDownRefresh":true } },2.使用uni.startPullDownRefresh()<template> <view> <view>列表页</view> <view v-for="item in list" &原创 2021-05-08 14:59:01 · 133 阅读 · 0 评论 -
uniapp学习之旅生命周期
生命周期的概念:一个对象从创建、运行、销毁的整个过程生命周期函数概念:可理解为对象的每个过程会伴随的函数触发APP生命周期函数(在APP.vue) 函数名 说明 onLaunch 初始化时触发一次 onShow 启动,或从后台到前台 onHide 从前台到后台 onError 报错时触发 页面生命周期 函数名 说明 onLoad 监听页面加载,参数为上个页面传递的数据,类型(Object) onShow 监听页面显.原创 2021-05-08 14:34:27 · 63 阅读 · 0 评论 -
uniapp学习之旅事件并行传参和传事件
<template> <view> <view>数据绑定的学习</view> <view>{{mes}}</view> <view>{{"奥里给"+'你好'}}</view> <view>{{2+2}}</view> <view>{{flag?'我是真的':'我是假的'}}</view> <image v-bind:src="ima.原创 2021-05-07 16:17:17 · 74 阅读 · 0 评论 -
uniapp学习之旅v-bind和v-for
v-bind:用来进行数据绑定v-for:用来循环显示具体语法及实现<template> <view> <view>数据绑定的学习</view> <view>{{mes}}</view> <view>{{"奥里给"+'你好'}}</view> <view>{{2+2}}</view> <view>{{flag?'我是真的':'我是假的'}}&原创 2021-05-07 16:05:53 · 262 阅读 · 0 评论 -
uniapp学习之旅基本的数据绑定
数据绑定写在标签script中,格式如下<script> export default{ data() { return{ mes:"hello", flag:false } } }</script>插值表达式的demo<template> <view> <view>数据绑定的学习</view> <view>{{mes}}</view> &l原创 2021-05-06 21:41:07 · 34 阅读 · 0 评论 -
uniapp学习之旅scss+字体图标
局部样式会覆盖全局样式全局样式写在App.vue字体图标将资源放在static中路径改为绝对路径 格式为 ~@/path使用文字图片<view class="iconfont icon-tupian"> </view>使用scss<style lang="scss"> @import url("./a.css"); .box1{ width: 375rpx; height: 375rpx;...原创 2021-05-06 21:26:44 · 112 阅读 · 0 评论 -
uniapp学习之旅image组件
<image>组件默认宽度 300px、高度 225px;app-nvue平台,暂时默认为屏幕宽度 src仅支持相对路径、绝对路径,支持 base64 码; 页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置image{will-change: transform},可优化此问题。 自定义组件里面使用<image>时,若src使用相对路径可能出现路径查找失败的情况,故建议使用绝对路径。 webp格式...原创 2021-05-06 20:51:47 · 871 阅读 · 0 评论 -
uniapp学习之旅button组件
button按钮组件常用样式代码+效果展示detail.vue<template> <view><!-- <view> <text>无敌季卡拉诺在学习</text> </view> <view> <text selectable>无敌季卡拉诺在学习</text>//selectable长按可选 </view> <view>原创 2021-05-06 20:26:09 · 528 阅读 · 0 评论 -
uni-app学习之旅view
图片取自uniapp官方文档https://uniapp.dcloud.io/component/viewdetail.vue<template> <view><!-- <view> <text>无敌季卡拉诺在学习</text> </view> <view> <text selectable>无敌季卡拉诺在学习</text>//selectable长按可选..原创 2021-05-06 19:52:39 · 245 阅读 · 0 评论 -
uni-app 学习之旅 text组件
图片取自uni-app官方文档https://uniapp.dcloud.io/component/text<text>组件内只支持嵌套<text>,不支持其它组件或自定义组件,否则会引发在不同平台的渲染差异。 在app-nvue下,只有<text>才能包裹文本内容。无法在<view>组件包裹文本。 decode 可以解析的有 <>&'&ensp...原创 2021-05-06 19:33:39 · 474 阅读 · 0 评论 -
uni-app学习之旅condition启动模式配置
写在pages.json中"condition":{//启动模式配置,用于模拟直达页面的场景 "current":0,//当前激活的模式,list节点的索引值 "list":[//启动模式列表 { "name":"详情页",//名称 "path":"pages/detail/detail",//页面路径 "query":"id=80"//启动参数,...原创 2021-05-06 19:14:34 · 179 阅读 · 0 评论 -
uni-app学习之旅tabBar
https://uniapp.dcloud.io/collocation/pages?id=tabbar自带参考文档写在pages.json中,图片保存再static中"tabBar":{ "color":"#F0AD4E",//未选中字体颜色 "selectedColor":"#007AFF",//选中字体颜色 "backgroundColor":"#DD524D",//tabbar背景颜色 "borderStyle"...原创 2021-05-06 19:02:45 · 96 阅读 · 0 评论