uniapp
几度风雨见丹心
这个作者很懒,什么都没留下…
展开
-
单页面内循环遍历的多个表单做校验(ui框架:elementui + uview)
单页面内循环遍历多个表单做校验原创 2023-01-12 11:17:08 · 2588 阅读 · 1 评论 -
自写选择框,全选框
自写选择框,全选框原创 2022-06-28 17:24:30 · 197 阅读 · 0 评论 -
uniapp-uview的表单校验——同步,异步,图片必输,数字校验爬坑
uniapp-uview的表单校验——同步,异步,图片必输,数字校验爬坑原创 2022-06-28 15:52:56 · 5205 阅读 · 1 评论 -
uniapp自增表单项
业务需求:某一表单项分为两个或多个输入框,两个或多个为一组,可以以组为单位,根据客户意愿自增或删除。期望效果图:1、页面初始时【主要检测设备】只有一行,需填入两项,设备名称和台数。2、点击新增按钮后,自动新增一组,此后每点击一次新增皆在最后新增一组。3、点击某组最右侧【删除】,即可删除掉这一组表单项。技术:uniapp,uview(UI框架),JS......原创 2022-06-28 15:08:24 · 3608 阅读 · 1 评论 -
uniapp开发app
uni-app 介绍uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。适用平台:Android、iOS、微信小程序。实现了一套代码,同时发布到Android、iOS、微信小程序。官方:https://uniapp.dcloud.io/开发开发工具(1)HBuilderX下载地址:http://www.dcloud.io/hbuilderx.html(2)微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev转载 2021-04-20 09:35:11 · 4923 阅读 · 0 评论 -
uniapp封装request,设置请求头与token,前端判断token过期
common文件夹下新建request.js文件// BASE_URL只是请求url的前半部分import BASE_URL from './url.js'// token默认过期时间var expiredTime = +new Date() +1800*1000// 不需要登录的接口const noToken = [ '/auth/login'];const request = function(options={}) { // 判断是否需要登录 if (!(noToken.i原创 2021-04-18 21:08:07 · 9593 阅读 · 2 评论 -
uniapp中,使用scroll-view 自写可滑动顶部导航栏,且点击后局部刷新
业务需求如下图:顶部是一个可滑动导航栏,点击导航栏之后,下面的部分局部刷新。1、定义top-nav组件<template> <view class=""> <view class="scroll-box"> <scroll-view class="scroll-view_H" scroll-x="true"> <view class="scroll-view-item_H" :class="currentItem.name==t原创 2021-04-18 20:59:45 · 768 阅读 · 0 评论 -
uniapp开发手机app,一个页面调用多次同一个下拉框子组件,保证同时间下拉框只打开一个(兄弟组件间的通讯))
1、业务需求:封装一个下拉框的组件,下拉框弹出时,下拉框下面有半透明遮罩,下拉框上面正常显示,效果如图:2、问题:当一个页面同时引用多次该组件时,下拉框和遮罩会同时存在彼此叠加3、解决:其实这个过程就是一个兄弟组件之间的通信问题,当有下拉框打开时,通知另外的下拉框都保持关闭状态。父页面引用组件代码:<template> <!-- 筛选框 --> <view class="searchBox"> <view class="inline shopNum原创 2020-11-19 19:32:29 · 2417 阅读 · 0 评论 -
uniapp制作微信小程序动画效果
业务需求:点击右侧橙色背景 ‘身份切换’圆形后,显示弹框,同时橙色圆形1s钟侧滑显示选择身份后弹窗消失,同时橙色圆形回到原位<!-- 切换身份圆圈 --><view class="changeIdentities" :class="{ active : active }" @tap="showChangeIdentitiesBox"> <view class="">身份</view> <view class="">切换</原创 2020-09-19 10:19:41 · 2830 阅读 · 0 评论 -
uniapp开发微信小程序,引入第三方SDK高德地图
一、获取高德Key:官方获取key的方法在这二、创建项目之后下载并安装微信小程序SKD:如果是开发安卓、IOS、APP项目,请找到对应的包下载并解压。下载微信小程序SDK解压后得到 amap-wx.js 文件,在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js 文件拷贝到 libs 的本地目录下,完成安装。这一步在uniapp运行的时候会报错,因为解压后的js文件方法都是wx.XXX。手动把这些前缀都改成uni.XXX之后可以运行了。以下是修改之后的文件:function原创 2020-09-08 09:36:27 · 8694 阅读 · 9 评论 -
uniapp开发微信小程序返回上一级路由
项目需求如图:2号页面跳转3号页面时用了路由替换<view class="commitButton" @tap="submitApplication">提交申请</view>submitApplication(){ // console.log(this.form); this.jump('/pageCommons/feedback/feedbackSuccess');},// 路由跳转jump(path, parmas) { this.$Router.re原创 2020-09-03 16:41:35 · 3573 阅读 · 0 评论 -
uniapp开发微信小程序/APP,配置某个页面隐藏原生导航栏
uniapp开发微信小程序/APP,隐藏其中某个页面的原生导航栏,需要在pages.json中设置如下代码:{ "path": "feedback/feedbackSuccess",//页面路径 "style": { "navigationBarTitleText": "反馈",//导航栏显示的文字 "navigationStyle": "custom",//禁用原生导航栏,微信小程序可用 "app-plus": { "titleNView": false //禁用原生导航原创 2020-09-03 13:33:18 · 5349 阅读 · 1 评论 -
uniapp开发微信小程序input框限制输入
<input @input="onlyNum" class="inp" v-model="phone" name="phone" type="number" maxlength="11" placeholder="请输入您的联系电话" placeholder-class="pl-style" @blur="replaceInput" />onlyNum(){ if(!(event.keyCode==46)&&!(event.keyCode==8)&&原创 2020-09-01 14:41:37 · 6004 阅读 · 2 评论 -
uniapp开发微信小程序,多行文本换行,动态改变文字区域宽度
需求:商品标题部分超出两行显示… 且当点击编辑显示选择按钮后,文字区域宽度变小后,文字不能溢出。如图:HTML代码<!-- 收藏 --><view class="goodsBox" v-if="type === 'favorite'" @tap="jump('/pageGoods/detail/index', { id: detail.id })"> <view class="img"> <image class="goodsImg" :src="原创 2020-08-31 16:22:16 · 2635 阅读 · 0 评论 -
uniapp开发微信小程序 做高度小于盒子的边框,精灵图
效果图如图:其中右侧边框线使用伪元素,小图标使用精灵图 <view class="content-box"> <view class="serviceItem" v-for="(item,index) in convenienceServiceList" :key="index"> <view class="serviceTop"> <view class="serviceImg" :style="{backgroundPosition: it原创 2020-08-31 15:16:10 · 1275 阅读 · 0 评论 -
uniapp开发微信小程序-关于按钮的小坑
需求描述:有一个五个按钮一排的选项,由用户自己选择类型,选中按钮变色。遇到的坑:将button按钮设置宽高颜色后用flex布局排布,在H5页面显示正常,但是在微信开发者工具中样子很奇怪,按钮不能到想要的位置。原因:微信小程序中,button按钮的层级较高,在调用底层api时使用,比如微信小程序的分享功能就必须是<button>按钮,设置open-type="share"属性调用方法。也因此在微信小程序中,button按钮的表现形式有时会与H5有差异。经验:在不需要调用底层api 的时候,原创 2020-08-27 19:56:19 · 1518 阅读 · 0 评论 -
uniapp + Vue子组件向父组件传值
子组件<view class="dropDown-item" v-for="(item,index) in comState" :key="index" @tap="changeCurrentState(item)"> <text>{{item}}</text></view>changeCurrentState(val) { // 向父组件传值 this.$emit('state',val);},父页使用子组件<view class原创 2020-08-20 20:50:16 · 1194 阅读 · 0 评论 -
uniapp 使用ucharts插件绘制图表
需求效果图:需求描述:佣金趋势图 都是线图,佣金占比图为环图,点击可以切换,佣金趋势图 可选择数据范围,前三个都是曲线图,最后一个是区域图。插件:ucharts.HTML 代码<!-- 顶部导航 --><view class="order-nav x-f"> <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120"> <view class="nav-item y-f原创 2020-08-20 12:13:42 · 5775 阅读 · 0 评论 -
uniapp做直播+可拖动弹幕
项目需求:用uniapp开发微信小程序,直播界面做可拖动弹幕。一、直播页面,微信小程序的<live-player>组件就是用来搭建直播的。我的项目需求是从上一个页面点击后直接跳转进对应的直播间,所以这个界面一开始就需要是全屏播放的。1.<live-player>的全屏.<live-player id="liveplayer" src="https://domain/pull_stream" mode="live" :autoplay="true" orient原创 2020-08-17 19:52:42 · 4957 阅读 · 4 评论 -
轮播图上图标滚动定位
uniapp开发:目标:直播头部的一个轮播图,轮播图左上角和中间分别需要显示观看人数和播放按钮,且需要随着图片滚动。效果如图:用了uniapp的组件 swiper,按钮是绝对定位(absolute),但是相对定位(relative)不能放在swiper-item上,因为会破坏组件的定位计算方式,导致白屏。最终将相对定位定在了最外面的box上HTML代码如下:<!-- 头部轮播 --><view class="swiper-box"> <swiper :indi原创 2020-08-13 19:39:27 · 350 阅读 · 0 评论 -
uniapp自写弹框黑屏问题
业务需求:在点击‘取消订单’ 按钮之后,显示一个弹框,继续接下来的操作问题:当点击的是‘全部订单’类型时,弹框显示后背景蒙版黑屏。如图但是在其他的栏目下点击就没有问题此处的顶部导航栏只起到了筛选数据的作用,下面的订单是遍历得到的。换言之,‘全部’和‘接单中’两处的数据结构,代码结构,样式都是一样的。问题:在写这个弹框代码的时候,没有将这个代码段放在根节点的子节点位置上,而是在孙子节点,这个导致了渲染时的问题,出现黑屏现象。更改代码位置之后可以正常运行了。...原创 2020-08-05 13:31:24 · 694 阅读 · 0 评论 -
uniapp开发,两种页面跳转的传参和接收参数
1.用navigateTo跳转父页面 传参methods:{ text(id){ uni.navigateTo({ //其中 /pageApps/live/liveList是跳转的子页面的路径,?后的是传递的参数 url: `/pageApps/live/liveList?id=${id}` }) }}子页面 接收参数onload(option){ console.log(option.id); }2.用jump跳转父页面 传参<butto原创 2020-07-31 15:17:20 · 9889 阅读 · 0 评论