![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
uni-app
杨葱儿
这个作者很懒,什么都没留下…
展开
-
uni 禁止滚动事件
【代码】uni 禁止滚动事件。原创 2023-02-10 10:47:29 · 239 阅读 · 1 评论 -
uniapp滚动到底部事件
【代码】uniapp滚动到底部事件。原创 2023-01-17 15:34:48 · 671 阅读 · 0 评论 -
由于应用universal link 校验不通过(ios分享)
Bundle id是你打包的时候 可以看到的填写进去,link也是在编辑器里面可以有的,填写好提交就可以了。在上拉基本信息那里去点击修改进去新的页面不用管, 下拉点击保存,下一步。下拉查看应用平台这里没有ios的,就要新增ios的。app苹果分享的时候校验不通过。这样就可以勾选新增ios的了,解决方法:登录微信开放平台。原创 2023-01-05 10:37:55 · 12052 阅读 · 0 评论 -
uni-app输入密码
<template> <view> <view class="u-padding-40"> <u-button type="success" @click="showPop(true)"> <u-icon name="red-packet"></u-icon> <text class="u-padding-l...原创 2021-11-18 11:20:51 · 741 阅读 · 0 评论 -
uni-app实现多选
<view class="times-list"> <view class="checkedNo" :class="{ checkedYes: checkedArrey.indexOf(i) != -1 }" v-for="(time, i) in classList" :key="i" @click="appointment(i)"> {{ time.name }} </view></view>classList: [{...原创 2021-10-19 16:07:23 · 1294 阅读 · 0 评论 -
uni-app 上传图片并压缩(uView)
<view class="" style="background: #fff;padding: 22upx 0;margin-top: 16upx;"> <view class="">拍照上传(至少一张,最多三张)</view> <view class=""> <view class="u-demo-area"> <u-upload :before-remove="beforeRemove" ref="uUpload" :ma.原创 2021-08-04 17:28:28 · 3044 阅读 · 4 评论 -
uni-app 将img图片转换为video视频
<!--原--><img src="src" alt="视频"><!--现--><video src="src" style="width:100%"></video><!--转换为视频后加入属性会预览视频图--><video :src="src" style="width:100%" controls :poster="src+'?x-oss-process=video/snapshot,t_0,f_jpg'"..原创 2021-05-19 15:47:25 · 1028 阅读 · 3 评论 -
uni-app 视频实现显示预览图
src视频路径为在线路径才可以<video :src="src" controls :poster="src+'?x-oss-process=video/snapshot,t_0,f_jpg'"></video>原创 2021-05-19 15:38:40 · 3881 阅读 · 1 评论 -
uni-app 跳转外部链接
A页面用uni.navigateTo跳转一个渲染外部链接的内部B页面url是文件路径。要用encodeURIComponent编码。不然路径会不完整//A页面tapdetail: function(i) {let url='http://saas.juwoxing.com/order/newpage/share/article_share.html?id='+i+'' url = encodeURIComponent(url) uni.navigateTo({ url:'softwe原创 2021-04-07 10:23:04 · 9421 阅读 · 1 评论 -
uni-app 使用u-echarts图表插件步骤(圆环)
一、去插件市场下载插件:https://ext.dcloud.net.cn/plugin?id=271二、把components和static里面的文件复制到自己的项目中三、使用:<template> <view class="qiun-columns"> <view class="qiun-charts" > <!--#ifdef MP-ALIPAY --> <canvas canvas-id="canvasRing原创 2021-03-18 17:32:35 · 4040 阅读 · 5 评论 -
uniapp上传图片转base64码(APP端,微信端)
插件地址:https://ext.dcloud.net.cn/plugin?id=123代码:注意点 引入的时候 必须是对象{}引入 不可删除 否则会报错:(0 , _index.default) is not a function<template> <view> <view @click="chooseImg">拍照</view> <view v-if="imgList.length > 0"> <...原创 2021-03-09 15:24:03 · 1239 阅读 · 0 评论 -
uni-app自定义导航栏返回路径
onBackPress(e){ console.log("监听返回按钮事件",e);//正常返回页面 uni.navigateTo({ url:"../service/service" })//返回主页面tabBaruni.switchTab({ url:"../service/service"}) // 此处一定姚要return为true,否则页面不会返回到指定路径 return true;}当用户进行以下操作时,会触发该函数: Android 实体返回.原创 2021-03-03 15:33:51 · 6197 阅读 · 1 评论 -
uni-app 自定义导航栏图标+文字(二)
page.json:{ "path": "pages/visit/addvisit/addvisit", "style": { "navigationBarTitleText": "添加拜访", "navigationBarBackgroundColor": "#f7ca44", "navigationBarTextStyle": "black", "titleNView": { "buttons": [{ "text": "发送", "fontSi...原创 2021-02-20 15:53:20 · 1877 阅读 · 1 评论 -
uni-app 通过本地经纬度获取详细地理位置
uni.getLocation({ type: 'wgs84', success: function(res) { console.log('当前位置的经度:' + res.longitude); console.log('当前位置的纬度:' + res.latitude); var point = new plus.maps.Point(res.longitude, res.latitude); plus.maps.Map.reverseGeocode( point, {.原创 2021-02-20 11:03:21 · 2382 阅读 · 1 评论 -
uniapp上传图片转base64码(PC端)
uni.chooseImage({ count: 9, success: res => { this.imageList = this.imageList.concat(res.tempFilePaths); console.log(res); // this.tempFilePaths = res.tempFilePaths[0]; this.urlTobase64(res.tempFilePaths[0]); .原创 2021-01-21 17:33:12 · 438 阅读 · 0 评论 -
Duplicate keys detected: ‘0‘. This may cause an update error. 解决办法
<view class="" v-for="(bind, bindex) in ite.bindcar" :key="bindex"> <view class="" style="font-weight: bold;">{{bind.auto_text}}</view> <view class="param" v-for="(param, pindex) in bind.param_texts" :key=...原创 2020-10-27 14:42:23 · 827 阅读 · 0 评论 -
nvalid prop: type check failed for prop “index“. Expected String with value “5“ 解决办法!
原来是elementUI的:index字段为字符串格式,后台数据为num格式,格式警告,格式转换,问题解决!提示的问题:是数据不匹配,传数的是Number类型 ,而组件需要的是String类型在这里,需要对数据类型进行强制转换即可,用String()强转。:value="ites.value_id" 改为::value="String(ites.value_id)"...原创 2020-10-27 11:24:31 · 1990 阅读 · 0 评论 -
uni-app 监听窗口尺寸变化事件和隐藏键盘
监听窗口尺寸变化:如App端设置软键盘弹出方式为adjustResize ,则在键盘弹出时,会触发此事件。 横竖屏切换时,会触发此事件uni.onWindowResize(CALLBACK)uni.onWindowResize((res) => { console.log('变化后的窗口宽度=' + res.size.windowWidth) console.log('变化后的窗口高度=' + res.size.windowHeight)})uni.offWind原创 2020-09-25 10:12:38 · 3688 阅读 · 0 评论 -
uni-app 软键盘顶起底部fixed定位的输入框
当点击input框时,软键盘弹出,把fixed定位的输入框向上推起,给input框设置::adjust-position="true" 即可<view class="cu-bar search bg-white" style="position: fixed;left: 0;bottom: 0;width: 100%;z-index: 9999;" > <view class="search-form"> <input :adjust-position="tru..原创 2020-09-25 09:51:26 · 4942 阅读 · 0 评论 -
uni-app 中uni.navigateBack 跳转方法 返回上一页携带参数
//A页面data() { return { sercode: "CQHY" }},methods: { tapcode: function() { uni.navigateTo({ url:'../code/code' }); }} // B页面 let pages = getCurrentPages(); //获取所有页面栈实例列表 let nowPage = pages[ pages.length - 1]; //当前页页面实例 let ..原创 2020-09-23 16:28:07 · 7540 阅读 · 0 评论 -
uni-app 实现锚点跳转方法
核心代码://从当前位置到达目标位置uni.createSelectorQuery().select('.comment-content').boundingClientRect(data=>{//目标位置的节点:类或者id uni.createSelectorQuery().select(".arc-content").boundingClientRect(res=>{//最外层盒子的节点:类或者id uni.pageScrollTo({ ...原创 2020-09-16 17:10:00 · 4280 阅读 · 0 评论 -
uni-app 自定义导航栏图标+事件(一)
一、阿里巴巴矢量图选出自己想要的图标:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2添加到自己的项目里,下载至桌面二、将解压好的项目打开,将两个文件复制到自己项目的static文件夹中:三、在page页面去使用"titleNView":{ "type":"default", "buttons":[{ "text": "\ue618", "fontSrc": "/static/fo..原创 2020-09-16 14:15:30 · 1537 阅读 · 0 评论 -
uni-app 列表消息滚动的实现
一、插件下载地址:https://ext.dcloud.net.cn/plugin?id=1179二、将插件里面的common文件复制到自己项目中去,在自己项目中App.vue中引入css(@import 'common/uni.css';)三、将tony-scroll.vue实例复制到自己项目页面去使用即可得到滚动效果示例代码:<template> <view class="home"> <view class="list uni-flex uni..原创 2020-09-15 16:09:09 · 8295 阅读 · 2 评论 -
uni-app 使用echarts图表插件步骤(柱状)
一、去插件市场下载插件:https://ext.dcloud.net.cn/plugin?id=1668二、把components和static里面的文件复制到自己的项目中:(如果你的图表不显示,肯定是忘记了static文件的js)三、使用:<template> <view> <echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>原创 2020-09-14 11:47:21 · 4684 阅读 · 15 评论 -
uni-app npm方法安装使用
一、打开对应项目的调试命令窗口1.电脑左下角搜索cmd,点击命令提示符,输入cd+空格+项目地址,回车就可以了:2.在当前目录下"shift+鼠标右键",点击“在此处打开Powershell窗口”:二、输入命令初始化npmnpm init -y三、安装包npm install @dcloudio/uni-ui四、引入使用1.全局安装:在main.js中:import {uniBadge} from '@dcloudio/uni-ui'2.本地安装:.原创 2020-09-10 17:25:43 · 20284 阅读 · 4 评论 -
uni-app 二维码生成(链接转二维码)
// 引入二维码库 import QR from "../../utils/wxqrcode.js" // 二维码生成器 let img = QR.createQrCodeImg('生成的内容', { size: parseInt(300)//二维码大小 })插件下载地址:https://ask.dcloud.net.cn/article/34931注意!!:uni-app 生成二维码时一旦生成二维码的字符串长度大于一定字节数会报错 gen()这个方法未定义方法一:.原创 2020-07-30 15:35:43 · 7541 阅读 · 2 评论 -
uni-app获取当前系统年月日:2020-07-01
使用new Date()方法获取系统今天的日期,显示格式为:2020-07-01<template> <view class="content"> {{date}} </view></template><script> export default { data() { return { date: new Date().toI原创 2020-07-01 14:04:40 · 8008 阅读 · 2 评论 -
uni-app 点击按钮回到顶部
参考官方文档:https://uniapp.dcloud.io/api/ui/scroll?id=pagescrollto<button type="primary" @click="tapscroll">回到顶部</button>tapscroll:function(){ uni.pageScrollTo({ scrollTop: 0, duration: 300 })}原创 2020-06-17 10:12:38 · 3365 阅读 · 0 评论 -
uni-app 下拉刷新,上拉加载更多
uni.showNavigationBarLoading() //打开加载更多动画uni.hideNavigationBarLoading() //关闭加载更多动画this.msglist =this.msglist.concat(res.data.data) //concat()方法连接两个或多个数组原创 2020-06-16 17:32:11 · 11593 阅读 · 3 评论 -
uni-app 原生标题栏搜索输入框事件合集
"pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "主页" "app-plus": { "titleNView": { "type":"default", .原创 2020-06-02 18:03:27 · 3269 阅读 · 4 评论 -
uni-app上拉加载更多方法
页面:<view> <uni-load-more :status="status" :content-text="contentText" color="#007aff" /></view>自定义组件:在 components 目录下(和 page 目录同级)新建一个 uni-load-more 文件夹, 然后创建一个文件 uni-load-more.vue uni-load-more.vue 完整文件如下:<template> .原创 2020-05-21 15:17:46 · 1781 阅读 · 0 评论 -
uni-app 正常页面跳转到tabbar底部页面
很有可能是由于在底部tabbar里面定义乐同样连接地址的bar,如果在底部footer页面定义了相同地址的bar,则此页面无法跳转,解决方法:使用uniapp或微信小程序的uni.switchTab({ url: '路径'});wx.switchTab({ url: '路径'});...原创 2020-05-08 14:20:13 · 6747 阅读 · 0 评论 -
uni-app导入本地json数据到页面并使用
1、在项目根文件夹中,先新建一个文件夹然后把数据丢到js里面2、jslet data = { //这里放数据}module.exports = { data: data}3、uni-app页面引入<script> import sortdata from '../../data/sortData.js' export defa...原创 2020-04-07 14:32:30 · 7933 阅读 · 2 评论 -
uni-app 分享给好友,生成小程序二维码海报
插件地址:https://ext.dcloud.net.cn/plugin?id=586<template> <view> <view class="sharecontent"> <button class="share-btn" @tap="shareEvn">分享</button> <!-- 分享弹窗--...原创 2019-11-05 15:00:16 · 7272 阅读 · 6 评论 -
uni-app 判断输入是否符合要求
//放进去判断的变量:variableif (!(/(^[1-9]\d*$)/.test(variable)){//如果不是数字...}if (!/^\d+(\.\d{1,2})?$/.test(variable)){//如果小数点后不是2位...}if (!(/^1[3456789]\d{9}$/.test(variable))){//如果不是电话号码...(能识别位数、开头...原创 2019-10-12 16:28:51 · 10835 阅读 · 0 评论 -
uni-app 加载更多
一、这种方法是先获取到了全部数据,再通过前端去处理(有点儿笨,哈哈~~~)<view class="carlis"> <view class="carli" v-for="(item,index) in deslist" :key="index"> <text class="carli_l">{{item.brandname}}</text&...原创 2019-10-12 11:46:06 · 3129 阅读 · 0 评论 -
uni-app 倒计时计时器
<text class="red">剩余时间:<text>{{remaining}}</text></text>export default { data() { return { remaining: '', //显示剩余时间 remainingd: '' //数据返回时间秒 } }, onLoad...原创 2019-10-12 10:48:00 · 20923 阅读 · 2 评论 -
uni-app 上传图片并压缩(colorUI)
<form><view class="cu-bar bg-white" style="border-top: 1upx solid #eee;"> <view class="action"> 上传图片 </view> <view class="action"> {{imgList.length}}/3 </vie...原创 2019-10-11 10:53:20 · 9861 阅读 · 6 评论 -
uni-app 在当前页调上个页面的方法
一、在上个页面写方法:methods: { showmsg: function() { this.name = uni.getStorageSync('name'); }}二、在当前页的方法中调用上个页面的方法在uni-app中是适配多端的,beforePage.showmsg()只在h5中有效,在app端和微信小程序端都会报错 not a function;在h5和...原创 2019-10-11 10:06:11 · 1727 阅读 · 0 评论 -
uni-app 预览并使用模板
一、预览1.作者是使用Hbuilder X编辑器2.文件---新建---项目---uni-app---Hellouni-app3.找到App.vue---运行---运行到小程序模拟器(就可预览uni-app自带的组件了)二、使用1.在第一步预览的时候看到了想要使用的组件(例如作者想要用---模板---滚动广告---竖向滚动)2.在项目下面---page---templa...原创 2019-10-03 17:00:27 · 5785 阅读 · 0 评论