- 博客(59)
- 收藏
- 关注
RSS订阅原创 uniapp 防抖节流封装和使用
防抖(debounce)：定义一个时间，延迟n秒执行，n秒内再次调用，会重新计时，计时结束后才会再次执行。节流(throttle): 函数会在一个时间段内只执行一次。函数封装 util文件下创建 commo.js文件。函数封装 util文件下创建 commo.js文件。主要运用场景：登陆、频繁请求大量数据接口。
2023-11-20 16:00:50
2434
原创 uniapp scroll-view滑到底部加载更多数据
进入页面加载完请求第一页数据（onLoad）或者切入前台请求（onShow），根据需求修改，我这里是onLoad。必须设置下面两个属性。
2023-07-13 14:17:16
3816
原创 vue+el-autocomplete 滚动到底部加载数据
<el-autocomplete ref="autocomplete" value-key="label" v-scrollLoad="load" v-loading="loading" v-model="state2" :fetch-suggestions="querySearch" placeholder="供应商名称/编码" :trigger-on-focus="false" @select="handleSelect"><..
2021-12-13 10:54:50
1827
2
原创 数组字符串相互转换
微信官方文档https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.htm1，小程序需要开通云开发2，下载官方文档的html文件和public函数找到H5文件夹下的jump-mp.html，代码做出如下修改（<!-- replace -->为需要修改的地方）<html> <head> <title>
2021-12-13 10:43:03
962
原创 Invalid prop: type check failed for prop “model“. Expected Object, got String with value ““.
报错信息为 未找到匹配的值类型，看到有 form.vue报错,应该是form表单有问题，检查后发现 modeld 的值未用到，但定义了，删掉就好了
2021-11-17 11:07:01
1989
原创 vue+Element ＜el-image＞组件总是加载失败问题
添加if判断即可原代码<el-image :src="infoList.image" ></el-image>修改后<el-image v-if="infoList.image" :src="infoList.image" ></el-image>
2021-11-10 10:49:00
1151
原创 vue检测data数据变化 watch
检测data中数据变化，变化后执行操作<script>export default { data() { return{ init:false, //检测的值 } }, watch: { init(newName, oldName) { //判断条件 if(!newName){ //检测的值变化执行的方法 this.deInit()
2021-10-22 15:57:08
757
原创 转换时间戳
// 转换时间戳 dateToMs (date) { let result = new Date(date).getTime(); return result; },
2021-08-06 15:34:22
304
原创 数组字符串转换
后台需要从input 的 value中取值，value赋值又是数组，数组与字符串相互转换JSON.parse(stying)JSON.styingify(arr) <body> <input type="" name="" id="input" value="value" /> <script type="text/javascript"> let Arrlist = [ {name: '张三',value:1}, {na...
2021-07-07 17:07:57
178
原创 web静态页面跳转微信小程序
微信官方文档https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.htm1，小程序需要开通云开发2，下载官方文档的html文件和public函数找到H5文件夹下的jump-mp.html，代码做出如下修改（<!-- replace -->为需要修改的地方）<html> <head> <title>
2021-07-07 16:42:48
1024
原创 微信小程序接口简单封装
app.vueexport default { globalData: { env_url: 'https://xxx.cn/', }, methods: { // 接口封装 Wxrequest(method, url, data, callback, errFun) { uni.request({ url: `${this.globalData.env_url}${url}`, method: method, data: data,
2021-03-16 11:40:13
163
原创 Vue引入TweenMax
npm安装npm install gsap --save-dev引入文件import {TweenMax} from ‘gsap’
2020-11-23 11:04:59
1474
原创 微信小程序swiper自动向右滑动
开发框架uniapp需求客户做成一个汽车轮播，但汽车都是向前走（也就是轮播向右自动滑动），看到uniapp官网swiper并没有这个属性，自己写一个代码<!-- Introduction Page --><template> <view class="bus-swiperbox"> <!-- 向左滑动 --> <swiper class="bus-swiper" circular="true" :current="cu
2020-11-20 17:27:47
1362
3
转载 uni-app的textarea中输入纯数字或者英文不换行的问题
在uni-app的textarea中输入纯数字或者英文不换行的问题在工作中遇到的小问题，使用uni-app的textarea，输入了一串纯数字不换行。解决办法：在样式中加word-break:break-allword-wrap:break-word完美解决！...
2020-10-22 18:05:14
1037
原创 uniapp父组调用子组件中的方法
父组件： <index>子组件：<pop>一、父组件调用子组件的方法1.在父组件中引入子组件<template> <view> <pop ref="pop" @regodate="regodate"></pop> //ref 调用时用于标识使用 ； @regodate ，调用子组件方法携带参数使用 </view></template><script>//引入子
2020-10-10 10:14:38
3542
原创 微信小程序卡片式轮播+自定义指示点实现（uniapp）
效果图：<swiper class="swiper" :circular="true" :autoplay="enjoyAut" @change="swiperChange" previous-margin="5rpx" next-margin="117rpx"> <swiper-item v-for="(item,index) in enjoySiwper" :key="index" class="enjoy-content-swiper"> <view.
2020-09-28 16:00:28
1256
原创 微信小程序导航滑到顶部固定顶部显示
<template> //为顶部导航声明id <view id="navTop" :class=" {'navgation': isTop == 0 ,'navgationTop':isTop == 1} "> 我是顶部导航 </view></template><script> export default { data() { return { myScroll:"", .
2020-09-19 17:22:01
863
原创 微信小程序跳转传参
一， navigateTo//微信开发者工具使用 wx.navigateTo API. id为携带的第一个参数，couponid为携带的第二个参数uni.navigateTo({ url: '/pages/vouchers/use-vouchers?id=' + e + '&couponid=' + el})二，全局存储(不推荐使用)跳转的页面存储uni.setStorageSync("key",key) //前面为自己命名的存储数据的名称，后者为存储的数据跳转
2020-09-19 17:04:49
238
原创 前端图片视频压缩工具
gif图、视频https://ezgif.com/resize-videopng图片https://tinypng.com/
2020-09-14 17:02:14
683
原创 JS获取和判断url携带的参数
方法一、获取url参数并判断 <script type="text/javascript"> var $_GET = (function(){ var url = window.document.location.href.toString(); var u1 = url.split("?"); var u =u1[1].split(" ") console.log(u) if(typeof(u[0]) == "string"){
2020-08-11 11:18:56
6858
原创 uniapp 微信小程序给图片后添加版本号
项目中有时会需要给项目中的图片添加一个版本号，方法有很多，我这里是选择用日期添加一个后缀版本号。首先在App.vue中：<script> export default { globalData:{ imgVersion: '?v=24' }, onLaunch: function() { console.log('App onLaunch'); let globalData = this.$options.globalData; let that
2020-07-29 14:04:54
780
原创 uniapp点击某区域触发一个事件，点击某区域外触发另一个事件
<template>//最外部定义一个事件external<view style="width:100vw;height:100vh" @click="external">//触发区域<view style="width:200rpx;height:200rpx;background-color:red" @click.stop="interior"><view></template>export default { da.
2020-07-15 13:24:54
8498
原创 uniapp制作手动滑动轮播
HTML<template><view class="bus-swiperbox"> <swiper :autoplay="circular" class="bus-swiper" circular="true":current="currentIndex" :duration="1000" @change="changeIndex" @animationfinish="changeFinish" > <swiper-item &
2020-07-10 18:18:13
1222
原创 微信小程序分享朋友圈
近日，微信小程序官方文档更新 wx.showShareMenu(Object object)，其中显示小程序可以分享到朋友圈啦！但是，设置分享朋友圈的前提是必须同时设置发生给朋友，也就是说，可以单独设置发送给朋友，但如果要设置分享朋友圈，必须同时设置分享好友。示例（基于2.11.3基础库）onLoad: function () { wx.showShareMenu({ withShareTicket: false, menus: ['shareAppMess
2020-07-09 10:22:00
774
原创 微信小程序动态显示隐藏元素的两种方法
1.display:none;wxml：<!--需要显示隐藏的元素--><view><text style="display: {{none}};">页面还未开发哦！</text></view><!--显示或隐藏操作--><button bindtap="aa">显示或隐藏</button>js：Page({ data: { //初始值设置为显示 none:"b.
2020-05-24 11:25:13
6307
2
原创 微信小程序判断是否授权登录（未登录出现弹窗跳转登录页面）
目录API代码实现API获取用户当前设置wx.getSetting：微信官方文档获取用户信息wx.getUserInfo：微信官方文档微信小程序弹窗wx.showToast：微信官方文档代码实现onLoad: function (options) { var that = this // 判断用户是否授权登录 wx.getSetting({ success: function (res) { // 判断是否授权
2020-05-24 09:12:36
15980
1
原创 微信小程序弹窗（提示框和确认框）
目录提示框关键属性代码实现确认框代码实现提示框wx.showToast：微信小程序官方文档关键属性代码实现<button bindtap="butt" >保存</button> butt(){ wx.showToast({ title: '保存成功', icon: 'none', duration: 1500, success: function () { //弹窗后执行，可以省略 setTim
2020-05-23 15:55:54
22054
原创 前端面试总结(三)
文章目录1.优雅降级和间隙增强是什么？有什么区别2.boorstrap中如何让PC端显示，手机端隐藏3.px和rpx的区别，em和rem的区别,vh和vw分别是什么？4.js中的数据类型5.this的含义，什么情况下使用this，改变this指针的两种方法6.js中怎样避免全局污染7.你懂闭包？实际应用中闭包的作用8.vue和小程序的生命周期9.vue，小程序，uni-app的优缺点（各五条）10...
2020-04-28 20:14:20
208
原创 前端面试总结（二）
文章目录1.jqurey vue uni-app 微信小程序的传参方式?2.session和cookie的区别?3.前端如何性能优化？4.git是什么 git的五个命令 git和svn的区别？es5和es6的区别？ Es6的新特性6.js操作数组的五个方法 字符串转数组？ 数组转字符串？7. vue uni-app 微信小程序的数据绑定8.bootstrap的class前缀9. Vue渲染时闪光问...
2020-04-28 20:14:09
251
原创 前端面试题总结（一）
1.Html5新标签（8个），css3新属性（5个）HTML5Canvas画布audio音频video视频embed嵌入datalist选项列表keygen表单密钥字段output脚本输出footer页脚header头部nav导航time日期CSS3border-radius边框圆角box-shadow边框阴影transform23D转换transition过度...
2020-04-26 10:18:28
625
原创 使用vant weapp组件做左拉删除功能
目录实现效果声明实现代码引用组件WXMLWXSSJS实现效果声明此功能通过vant weapp组件制作，未安装vant weapp无法实现效果，安装vant weapp实现代码引用组件当前页面的json中引用从上到下分别为步进器组件引用、按钮组件引用、和滑动块组件引用（因为我在页面中用到了这些组件，请过根据自己的项目需求引用）{ "usingComponents": { ...
2020-04-20 19:45:40
2536
原创 微信小程序分享好友功能
所需微信小程序API和函数onShareAppMessage微信小程序声明周期函数，设置用户分享好友功能设置分享好友缩略图的内容wx.showShareMenu开启分享好友功能通过微信小程序右上角三点按钮分享JSPage({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ ...
2020-04-20 17:28:23
2807
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人