- 博客(25)
- 收藏
- 关注
RSS订阅原创 微信小程序 页面跳转
微信小程序各类跳转页面方法// 普通跳转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
804
原创 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
1520
原创 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
1632
原创 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
334
原创 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
1028
原创 uniapp及微信小程序禁止头部导航栏
项目中有些场景原生导航栏并不能实现，就需要自定义导航栏 但是需要取消原生导航栏全局取消头部导航栏：进入pages.json配置文件中找到globalStyle在内部添加"navigationStyle": "custom"单页取消导航栏：在页面配置style中添加相同属性"navigationStyle": "custom"就能取消单页面导航栏...
2021-11-01 11:44:29
1137
原创 uniapp及微信小程序遮罩层禁止页面滚动
写uniapp时，页面高度溢出遮罩层定位方式实现。但是页面可以滑动 在遮罩页面中加入@touchmove方法实现禁止页面滚动@touchmove.stop.prevent="moveHandle"
2021-11-01 11:36:30
1270
原创 带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
1204
原创 微信小程序基础的使用
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
93
原创 vue+科大讯飞 实现语音听写功能
最近公司需求语音转文字功能，对接了科大讯飞中的语音听写功能，因为官方文档中没有vue的demo。踩了几个坑，把踩的坑记录一波坑一：WebSocket connection to 'wss://iat-api.xfyun.cn/v2/iat?authorization=YXBpX2tleT0iIiwgYWxnb3JpdGhtPSJobWFjLXNoYTI1NiIsIGhlYWRlcnM9Imhvc3QgZGF0ZSByZXF1ZXN0LWxpbmUiLCBzaWduYXR1cmU9IjlNRUpnZDBD
2021-06-23 10:47:10
5894
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
3572
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
1110
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
239
原创 VUE 公共JS无法路由跳转
vue 引用注册了公共JS 但是在js文件夹中无法路由跳转页面解决方案：1.在公共js中引入路由import router from "@/router";2.跳转不需要使用this.使用router路由跳转就好了 router.push({path:'/'})
2021-02-26 09:31:41
552
原创 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
1134
原创 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
60299
原创 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
11602
转载 vue Examples-图表添加固定警戒Y轴线
var option = { title: { text: this.stockData.material + " 库存波动明细", }, tooltip: { trigger: 'axis', ...
2020-11-24 16:19:20
264
原创 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
2784
原创 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
11516
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
346
原创 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
2158
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人