uni-app
一个假的前端男
一个 迷迷糊糊的前端
展开
-
uniapp input 输入字符过长自动截断
@input 事件<view class="notice"> <view class="name">交易流水号</view> <view><input type="text" v-model="param.payNum" placeholder="请输入交易流水号" placeholder-style="color:rgba(147, 147, 147, 100);font-size: 16px;margin-top:1rpx" @input="原创 2021-09-13 14:09:24 · 1273 阅读 · 0 评论 -
uniapp 自定义底部导航栏设置
该方案结合uview Tabbar 实现根据文档可知1、在page中正常写入2、在各个tabbar页面引入u-tabbar组件,组件会默认自动通过uni.hideTabBar()隐藏系统tabbaru-tabbar级别最好和内容最外层同级3、用vuex 实现动态切换4、根据权限动态分配...原创 2021-09-13 11:32:46 · 1680 阅读 · 0 评论 -
uniapp 子组件 mounted 刷新
实现方法:通过在父组件的onShow调用子组件的方法(请求) 实现页面的刷新父组件 html <stock :obj="obj" ref="stock" />js onShow() { console.log('我是onshow') this.$refs.stock.getData() },子组件js 请求的参数必须在data中初始化data() { return { tableData:{}, info:{ directorEnabled: JS原创 2021-08-13 18:01:24 · 3369 阅读 · 1 评论 -
uniapp底部IOS安全距离
// 盒子 用法paddingBottom { padding-bottom: constant(safe-area-inset-bottom); // 顶部安全区 padding-bottom: env(safe-area-inset-bottom); // 底部安全区 box-sizing: content-box;}定位 二选一 bottom: constant(safe-area-inset-bottom); bottom: env(s原创 2021-07-26 17:13:13 · 1934 阅读 · 0 评论 -
uniapp ios 调数字键盘
<input type=”number” pattern=”[0-9]*”>原创 2021-07-12 11:09:16 · 1230 阅读 · 0 评论 -
uniapp 下拉效果显示
弹框的思路1、通过固定定位 + animation 实现动画效果2、通过绑定动态绑定类 :class 实现动画的交替 .anim { animation: tobottom 1s ease-in; animation-fill-mode: forwards; } @keyframes tobottom { from { top: -90px; } to { top: 65px; } }2、 通过 animation-fill-mode: .原创 2021-06-02 11:57:35 · 3747 阅读 · 1 评论 -
uni-app 引入本地iconfont
一、首先下载字体文件二、然后删除多余文件,只需要留下 iconfont.ttf 和 iconfont.css 文件放入到 static 下,修改 iconfont.css 文件,如下在需要的地方引入 样式文件效果原创 2021-05-26 18:19:52 · 437 阅读 · 0 评论 -
uni-app 封装request
第一步、根目录下新建 config.js 文件const config = {base_url: '这里可以是生产环境或者测试环境'}export { config }第二步、根目录下新建 https/index.js 文件import { config} from '../config.js'export const apiResquest = (prams) => { //prams 为我们需要调用的接口API的参数 下面会贴具体代码 // 判断请求类型 let hea原创 2021-05-25 17:13:33 · 761 阅读 · 0 评论 -
uni-app 腾讯地图选址
需求:在H5实现地图选点功能步骤:1、官方文档有详细介绍 官方地址2、个人操作步骤:申请你的key 官方地址:官网地址3通过webview嵌入组件,只支持新页面,不支持弹框形式<web-view src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你的key&referer=myapp"></web-view>监听点击位置信息的返回值// #ifdef H5转载 2021-01-27 23:57:35 · 627 阅读 · 0 评论 -
uni-app uview 的安装
本文通过npm 安装具体见官网1、安装node-sass sass-loader输入npm i node-sass sass-loader -D2、创建package.jsonnpm init -y3、安装uviewnpm install uview-ui4、引入uView主JS库// main.jsimport uView from "uview-ui";Vue.use(uView);5、在引入uView的全局SCSS主题文件/* uni.scss */@i原创 2021-01-27 23:49:44 · 273 阅读 · 0 评论 -
uni-app 自定义图标
1、在page.json里的配置项主要注意:fontSrc:图标类型为ttf text为图标的unicode编码 float决定了图标时的位置{ "path": "pages/my/index", "style": { "app-plus": { "titleNView": { "buttons": [{ "text": "\ue605", "fontSrc"转载 2021-01-27 22:22:22 · 796 阅读 · 0 评论 -
微信第三方登录
https://www.cnblogs.com/kenshinobiy/p/8640006.html原创 2020-10-20 22:34:25 · 165 阅读 · 0 评论 -
uni-app 微信小程序打开
1、运行->运行到小程序模拟器->微信开发者工具如果报下列错误 则在微信开发者工具中打开->设置->安全设置->服务端口打开22:18:17.630 [微信小程序开发者工具] [error] IDE service port disabled. To use CLI Call, please enter y to confirm enabling CLI capability, or manually open IDE -> Settings -> Secu原创 2020-10-20 22:20:32 · 1247 阅读 · 0 评论 -
uni-app 如何在app端查看输入结果
Hbuilder编辑器->设置->运行配置->打开真机运行时打开调试视图原创 2020-10-20 22:15:47 · 1599 阅读 · 0 评论 -
uni-app返回上一页
点击事件中放入下列代码 uni.navigateBack()原创 2020-10-19 22:15:27 · 1825 阅读 · 1 评论 -
uni-app 上拉加载更多
onReachBottom //上拉 onReachBottom() { console.log("上拉") this.page=++this.page uni.request({ url: `${this.$api}/search/list?qq=40699904&keywords=${this.keywords}&page=${this.page}&pageSize=${this.pageSize}`, method: 'POST原创 2020-10-19 17:30:45 · 242 阅读 · 0 评论 -
uni-app 下拉刷新
//下拉刷新 onPullDownRefresh() { //刷新的数据 //轮播图请求 this.banner() //超英 预告片 this.getHotMovie() // 1s 停止下拉刷新 setTimeout(function() { uni.stopPullDownRefresh(); }, 1000); }...原创 2020-10-19 17:15:55 · 227 阅读 · 0 评论 -
uni-app scroll 横向滑动
思想: 标签需包含横向滑动所有的内容所以建议:在 <scroll-view></scroll-view> 标签中放入一个div 保存所有数据 <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120"> <view style="display: flex;"> <view class="scroll-view-item_H" style="margin-原创 2020-10-19 14:52:27 · 968 阅读 · 0 评论