uni-app
uni-app知识
cmmboy1990
积累、
展开
-
uniapp H5预览excle、pdf、word等文件
1.代码previewFile() { uni.showLoading({ title: '加载中' }) uni.downloadFile({ url: "https://..../gwy.xls", //后端返回的文件地址 // filePath: wx.env.USER_DATA_PATH + '/gwy.xls', // filePath: wx.env.USER_DATA_PATH + '/' + item.name + '.'原创 2022-01-27 09:56:38 · 7241 阅读 · 15 评论 -
uniapp 微信小程序预览excle、pdf、word等文件(支持微信内转发)
1.代码previewFile() { uni.showLoading({ title: '加载中' }) uni.downloadFile({ url: "https://...../gwy.xls", //后端返回的文件地址 filePath: wx.env.USER_DATA_PATH + '/gwy.xls', // filePath: wx.env.USER_DATA_PATH + '/' + item.name + '.' +原创 2022-01-27 09:45:52 · 2697 阅读 · 0 评论 -
vue滑动列表悬停列表上部分指定区域
1.效果:2.代码<template> <div class="hello"> <div class="top"> <div class="searchView"> <img src="../assets/search_icon.png" class="search-icon" /> <input class="input-text" placeholder="请输入关键词搜索" /> </原创 2021-11-24 15:48:04 · 842 阅读 · 0 评论 -
uni-app 小程序 微信订阅消息通知
1.在小程序公众平台选择消息模板2.uni-app前端调用代码a.小程序登录代码loginUser() { var me = this; if (!me.name) { uni.showToast({ title: '用户名不能为空!' }); return; } if (!me.password) { uni.showToast({ title: '密码不能为空!' }); re原创 2021-11-23 09:44:48 · 2353 阅读 · 0 评论 -
uniapp scroll-view横向滚动 底部自定义滚动条
uniapp scroll-view横向滚动 底部自定义滚动条1.效果2.代码<template> <view style="margin: 0rpx;"> <scroll-view scroll-x="true" class="images-view" @scroll="scroll2"> <view class="images-view-item" v-for="(item,index) in imageList" :key="index"原创 2021-09-24 14:28:22 · 1288 阅读 · 2 评论 -
uniapp scroll-view横向滚动 自定义底部指示器样式
uniapp scroll-view横向滚动 自定义底部指示器样式1.效果2.思路:动态设置元素的margin3.代码<template> <view style="margin: 0rpx;"> <scroll-view scroll-x="true" class="images-view" @scroll="scroll"> <view class="images-view-item" v-for="(item,index) in image原创 2021-09-24 14:15:43 · 978 阅读 · 3 评论 -
uniapp H5端的地图组件markers设置id后不显示
uniapp H5端的地图组件markers设置id后不显示问题源头:数组push无效解决:直接给markers重新赋值有效。this.markers2.push(params)this.markers = this.markers2原创 2021-09-24 13:01:55 · 1151 阅读 · 2 评论 -
uniapp 子组件实时刷新数据
uniapp 子组件实时刷新数据1.通过在父组件的onShow调用子组件的方法 实现页面的刷新<personal-qy ref="toRefresh"></personal-qy>onShow() {this.$refs.stock.getDetails()}getDetails() 是子组件的方法2.通过-if 在父组件中的onShow 创建和 onHide销毁组件<personal-qy v-if="isRefresh"></person原创 2021-09-22 17:43:05 · 5102 阅读 · 0 评论 -
uniapp 跳转到页面布局指定位置
uniapp 跳转到页面布局指定位置@click 方法中调用以下方法uni.createSelectorQuery().select(".content").boundingClientRect((res)=>{ uni.pageScrollTo({ duration:0,//过渡时间必须为0,uniapp bug,否则运行到手机会报错 scrollTop: res.height, }) }).exec().c原创 2021-09-18 17:18:35 · 1392 阅读 · 0 评论 -
uniapp 顶部tabBar
uniapp 顶部tabBar1.效果图2.组件代码<template> <view> <view class="content"> <scroll-view class="noScorll bar-view" scroll-x scroll-with-animation> <view class="titleBar"> <view class="barItem" v-for="(item,index)原创 2021-09-09 11:14:15 · 1261 阅读 · 0 评论 -
uniapp 沉浸式状态栏
uniapp 沉浸式状态栏1.page.json 中设置 :“navigationStyle”:"custom""globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationStyle":"custom", // "navigationBarBackgroundColor": "#feb427", "backgroundColor": "#F8F8原创 2021-08-04 13:11:02 · 2570 阅读 · 0 评论 -
uniapp 小程序报错 Cannot read property ‘forceUpdate‘ of undefined
uniapp 小程序报错 Cannot read property ‘forceUpdate’ of undefined1.问题:解决:配置小程序的IDmanifest.json的文件原创 2021-08-04 10:10:18 · 915 阅读 · 0 评论 -
uniapp 小程序 background-image不显示图片
uniapp 小程序 background-image不显示图片1.问题:<view class="top-view">.top-view { background-image: url(../../static/icon_top_bg.png);}2.解决:1.转为base64格式图片菜鸟工具在线转base64.xxx{ background-image:url(‘data:(此处为转码后的代码)’}2.把图片上传到测试服务器...原创 2021-08-04 10:06:21 · 3681 阅读 · 0 评论 -
uni-app中引入uViewUI框架
uni-app中引入uViewUI框架uViewUI官方地址:https://uviewui.com/1、npm 安装uViewUI// 安装npm install uview-ui2、npm 安装方式的配置uView依赖SCSS,您必须要安装此插件,否则无法正常运行。HBuilderX工具中要安装scss插件: HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装 // 安装node-sass npm i node-sass -D原创 2021-06-15 17:32:27 · 1016 阅读 · 0 评论