- 博客(25)
- 收藏
- 关注
原创 微信小程序 页面跳转
微信小程序各类跳转页面方法// 普通跳转wx.navigateTo({ url: 'url',})// 跳转到tabbar页面wx.switchTab({ url: 'url',})// 关闭当前页面,跳转到某个页面wx.redirectTo({ url:"url"})// 标签跳转页面<navigator url="url"></navigator>// 返回上一页wx.navigateBack()// 返回上一页携带参数
2022-04-15 14:25:29
848
原创 uniapp vue 实现模仿微信支付密码弹窗
需求模仿支付模态框<template> <view class="modalBg"> <view class="modal_view"> <view> 请输入密码! </view> <view class="password"> <view class="flex"> <view class="password_num flex" v-for="(item,index
2021-12-09 18:00:59
1638
原创 vue 实现数字滚动卡片
工作场景需求一个数字滚动的卡片展示,具体实现功能:html页面代码:因为场景是五位数字的场景,但是data定义number不能00000又懒的string去转number,所以定义了六位数然后投了个巧v-show直接去除第一位数。:style="{transform: translateY(-${item*39}px)}" 是滚动的关键,其中39px是自定义的view高度<view class="num_view" v-for="(item, index) in this.realTime"
2021-11-24 16:01:11
1736
原创 css 地址框做出类型信封效果
直接上代码<div class="letter-box"> <div class="letter-border"> <div class="consignee "> <div>收货人:李思思</div> <div>手机号:123456789</div> <div>收货地址:广东省深圳市南山区科技园12路&l
2021-11-19 14:45:13
403
原创 uniapp picker的使用
<template> <view class="bground"> <picker class="select" mode="selector" :range="title_list" range-key="name" @change="titlePicker"> <view style="color: #FB231F"> {{title}} <
2021-11-09 10:14:54
1137
原创 uniapp及微信小程序禁止头部导航栏
项目中有些场景原生导航栏并不能实现,就需要自定义导航栏 但是需要取消原生导航栏全局取消头部导航栏:进入pages.json配置文件中找到globalStyle在内部添加"navigationStyle": "custom"单页取消导航栏:在页面配置style中添加相同属性"navigationStyle": "custom"就能取消单页面导航栏...
2021-11-01 11:44:29
1206
原创 uniapp及微信小程序遮罩层禁止页面滚动
写uniapp时,页面高度溢出遮罩层定位方式实现。但是页面可以滑动 在遮罩页面中加入@touchmove方法实现禁止页面滚动@touchmove.stop.prevent="moveHandle"
2021-11-01 11:36:30
1315
原创 带input框的模态框 适用vue和uniapp
最近项目中遇到需要一个带input输入框的模态框。想找一个框架中自带的,结果没有找到 都是不带输入框的因为考虑到复用性封装成组件了父组件调用:<view @tap="onModalShow">调用模态框<view ><inputM :modalData='modal' @dataInput='dataInput'></inputM><script> import inputM from "../../../components/mod
2021-09-09 15:59:43
1320
原创 微信小程序基础的使用
1.富文本类型转义<rich-text nodes="{{data}}"> </rich-text>2.页面之间的链接// 标签跳转页面<navigator url="url"></navigator>// 带参跳转页面// wx.navigateTo({// url: 'url?id=0'// }) //返回上一页wx.navigateBack()3.storage的存放使用// 储存storage数据wx.setSto
2021-09-06 18:02:09
123
原创 vue+科大讯飞 实现语音听写功能
最近公司需求语音转文字功能,对接了科大讯飞中的语音听写功能,因为官方文档中没有vue的demo。踩了几个坑,把踩的坑记录一波坑一:WebSocket connection to 'wss://iat-api.xfyun.cn/v2/iat?authorization=YXBpX2tleT0iIiwgYWxnb3JpdGhtPSJobWFjLXNoYTI1NiIsIGhlYWRlcnM9Imhvc3QgZGF0ZSByZXF1ZXN0LWxpbmUiLCBzaWduYXR1cmU9IjlNRUpnZDBD
2021-06-23 10:47:10
6669
23
原创 vue 正则校验(邮箱,手机号,密码)验证
邮箱验证:const data = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;手机号验证:const data = /^[1][3,4,5,7,8][0-9]{9}$/;至少六个字符,纯数字验证:const data = /^[0-9]{6,}*$/至少八个字符,至少一个字母和一个数字:const data = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/至少八个字符,至少一个字母,一个数字和一
2021-06-05 11:17:02
3761
1
原创 vue移动端物理按键点击两次再退出应用
vue生成的APP一般点击一次物理返回按钮便直接退出应用,用户使用时比较不方便。使用mui中的方法实现需要点击两次再退出应用。代码如下1.npm下载一个mui依赖npm install --save vue-awesome-mui2.在main.js中引用import Mui from 'vue-awesome-mui'Vue.use(Mui)3.在根目录中的index.html页面中添加实现方法:<script type="text/javascript"> mui.
2021-05-25 10:04:16
1183
1
原创 Vue 子组件v-shou无法在父组件中更新状态
子组件中使用v-shou在父组件中无法更新状态子组件中的事件:// 做的是一个侧边导航栏,所以使用数组点击事件onClickOne(res,index){ res.listShow = !res.listShow},解决方法:在点击事件中使用Vue.set();方法onClickOne(res,index){ res.listShow = !res.listShow Vue.set(this.LeftList,index,res); // Vue.set(第一个参数为数组,第二个参
2021-04-25 19:40:55
263
原创 VUE 公共JS无法路由跳转
vue 引用注册了公共JS 但是在js文件夹中无法路由跳转页面解决方案:1.在公共js中引入路由import router from "@/router";2.跳转不需要使用this.使用router路由跳转就好了 router.push({path:'/'})
2021-02-26 09:31:41
595
原创 Vue 注册全局css样式与注册全局方法
创建一个在main.js同根源的文件夹用于放置css样式与js方法注册全局css样式:全局注册css比较简单直接在main中引用就可以使用了//在main.js中引用就可以直接使用了import '@/assets/style/index.css'全局注册js方法1.在main.js中引用js文件夹import common from '@/assets/style/common.js' // 引入全局文件common.jsVue.prototype.$common = common;
2020-12-17 10:49:47
1216
原创 vue 数组添加数据
vue 数据添加分为三种方法:1.unshift(),2.push(),3.splice()<template> <div> <ul> <li v-for="(time,index) of listTable" :key="index" @click="copyNew(time,index)"> {{time.id}}{{time.name1}}{{time.name2}} 添加 </li> </u
2020-12-08 11:08:48
62280
原创 Vue js 数组,字符串之间转换 / 数字,字符串之间转换
数组转字符串: var list = ['a','b','c'] var listString = list.join(',') //变成字符串后,以逗号分隔 console.log(listString)字符串转数组: var string = '1,2' var list = string.split(',') //字符串按逗号分隔成数组 console.log(list)字符串转数字: var string = '9'
2020-12-04 16:04:56
11770
转载 vue Examples-图表添加固定警戒Y轴线
var option = { title: { text: this.stockData.material + " 库存波动明细", }, tooltip: { trigger: 'axis', ...
2020-11-24 16:19:20
301
原创 css table表格宽度自适应,溢出处理
table 表格中根据td中的内容自适应宽度.table_content tr td{white-space: nowrap}然后设置父元素的溢出处理,实现拉动效果.table_content{overflow:auto;display:block;width: 100%;}
2020-11-16 17:32:22
3000
原创 vue判断input框中的checkbox(单选)是否为选中状态
开发购物车项目中需要判断商品是否选中或者取消。开始使用的是Vant-ui中的 van-checkbox 组件,因为van-checkbox无法获取v-model中的状态值 后来就直接使用input写了。<input type="checkbox" v-model="item.onYes" :name="item.id" @click="choice(item,index)"/>//item.onYes是后台返回的初始值(字符串格式,可以使用Boolean()进行转义为布尔类)在metho
2020-10-21 11:57:41
11794
4
原创 VUE 注册组件与组件传值
vue组件注册与组件传值1.组件定义与组件局部注册(全局注册在main.js中注册)1.1在根目录components文件夹中注册自定义组件1.2在父组件中注册并且引用子组件//引进子组件目录import TestOne from '../../components/test.vue'// 局部注册子组件components:{ TestOne},//父组件中引用子组件<template> <div> <TestOne/> </
2020-10-16 11:31:32
379
原创 VUE 判断接口数组中的某个值并将它赋值给新的数组
写分类时接口返回的内容是全部分类在一个接口之中的,需要前端判断接口中的指定的值返回到新的数组中在data中定义两个数组,其中一个数组空值用于接收 testOne:[ {id:'1',name:'a'}, {id:'2',name:'b'}, {id:'3',name:'a'}, {id:'4',name:'b'}, {id:'5',nam
2020-10-11 15:28:17
2246
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人