Duccky-CSDN博客

原创微信小程序canvas超出屏幕实现左右滑动的方法

跟所有人的想法相同,第一次使用canvas绘制的折线图,我选择了放在scroll-view 内,在开发者工具上是可以实现滑动的,但是在真机上面发现不能滑动.原因是canvas层级是最高的,后来发现官方文档已经明确说明经过无数种方法的测试,.始终会存在一个问题.就是滑动不流畅.比如通过绑定canvas的时间,获取移动的距离,从而改变canvas的位置, 这种方法是极不流畅的,非常的生硬.下面我将给出...

2018-07-12 14:17:15 14212 9

原创微信小程序自定义顶部导航栏（兼容适配所有机型）

在微信小程序中，自定义导航栏的颜色可以在app.json. window里面添加navigationBarBackgroundColor属性。但是颜色只能为十六进制颜色码，不能使用rgb，或者rgba.。为了满足更多用户的需求，微信官方给出了一个navigationStyle属性。官方文档：navigationStyle 导航栏样式，仅支持 default/custom。custo...

2018-05-29 18:34:07 98170 28

原创小程序禁止页面拉动（非禁止小下拉刷新）

在微信小程序中，用力往下拉动，页面顶部会出现一段空白的地方。这个时候可以在当前页面的json文件里面，加上"disableScroll": true这个属性，页面就会禁止拉动。但是这里注意的是，在app.json里面写上这个属性并不会生效，一定要在需要禁止的页面的json文件加上才会生效enablePullDownRefresh （下拉刷新）和 disableScroll 同时为true的时候 ...

2018-03-16 13:11:07 45340 8

原创面对多层数据结构，用JS可选链的方式代替传统if判断写法，减少冗余的写法

在通常情况下，后端会返回多层数据嵌套的结果例如：let data = { page: { current_page: 1, page_size: 7, total_page: 1, count: 5, vipinfo: { total_money: 1000, expire_month: 12 } }}//获取expire_month

2020-11-26 18:07:06 375

原创 v-for 遍历避免同时使用 v-if

v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。推荐写法：<ul> <li v-for="(item,index) in userList" :key="item.id"> {{ item.name }} </li></ul>computed: { userList: function () {

2020-09-21 15:26:46 602

原创 Vue在所有的文件引用路径中，添加前缀域名/项目不在服务器根目录，router配置

Vue在所有的文件引用路径中，添加前缀域名在build文件夹打开webpack.base.conf.js文件module.exports = { output: { filename: "[name].js", // 出口文件的文件名 path: path.resolve(__dirname, "build"), //出口文件的路径 publicPath: 'http://www.xxxx.com/h5/' // 给所有的文件引用路径中，添加前缀域名

2020-05-27 15:32:59 2810

原创 vue项目执行npm run build 打包出现某些图片，字体，资源文件路径404，无法加载的问题

如图所示：如果出现如图的错误。首先我们第一步是考虑进入dist文件夹里面的static文件夹正常情况下static文件夹是非常干净的如果你发现你的static文件夹出现了多余的img、fonts文件夹等。则可以考虑如下的解决方式。一般出现这种情况是因为图片过大或者资源文件过大、超过了打包规定的限制此时，我们按照下图找到对应的文件默认限制是10kb。我们可以修改为...

2018-09-20 17:13:22 4885 2

原创 vue router路由跳转带参数方法以及带参数后无法跳转的问题

在开发项目的过程中,经常会遇到某一个场景. eg:点击某个东西,会进入当前那个东西的详情页. 此时一般的处理方式就是需要获取到当前点击对象的id.跳转到新页面,根据这个id通过网络请求获取到详细的参数.在vue中.假如我们创建了两个vue文件. 一个Aaa.vue,一个叫Bbb.vue文件.在index.js文件中. import Videolist from '../pages/a...

2018-09-04 14:31:29 11426 1

原创 vue自定义底部导航栏Tabbar

如图所示，要完成类似的一个底部导航切换。首先。我们需要分为5个大的VUE文件。可以根据自己的习惯来放在不同的位置。我将5个主要的VUE文件放在了5个不同的文件夹然后，在组件文件夹里新建Tabbar.vue /以及Item.vue文件Item.vue文件如下<template> <div class="itemWarp flex_mid" @clic...

2018-09-03 11:52:32 39747 26

原创 JavaScript格式化日期时间

/*获取时间数组-- data(为当前日期)*/function getTimeArray(date) { var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var hour = date.getHours(); var m...

2018-07-06 11:13:23 673

原创微信小程序图片/视频直传阿里云服务器OSS

阿里云官方文档:https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.634.AMs4Fj第一步(需要由后台提供接口,前端获取一些必要参数) oss: function(token) { var _this = this; wx.request({ ...

2018-06-19 15:08:41 6827 4

原创微信小程序Canvas绘制圆形图片

<canvas canvas-id="myCanvas"/>//获取设备的信息let mobile = wx.getSystemInfoSync();//获取设计图纸换算比例（用于自适应所有屏幕）let ratio = mobile.windowWidth / 375;（375px为iphone6屏幕宽度）const ctx = wx.createCanvasConte...

2018-06-12 14:37:54 10608 2

原创手机百度APP H5网页底部元素position:fixed属性失效. DIV元素结构被自动隐藏

如下图,在很多H5活动页都会有一个固定在底部的下载按钮,由于有设计好的字体,为了方便,通常会选择用一个图片放在div里面,再对div使用position:fixed属性. 但是由于手机百度APP里面有一个功能,叫做自动屏蔽广告.由于大多数的网页广告都才用这种展现的形式.所以,他们会把这个按钮当做广告直接屏蔽掉.此前,直接对img加了一个width:100%;的属性. 后来经过不断地尝试.发现只要图...

2018-05-28 15:43:30 3557 1

原创鼠标移入图片变成碎片/移出图片复原动画效果

图片外面只需要一个包裹的div<div class="box"></div>.box{ width: 640px; height: 640px; margin: 0 auto; margin-top: 100px; position: relative;}.item{ width: 64px; height: 64px; position: absolu...

2018-05-05 20:53:37 1060

原创微信小程序用户拒绝授权的官方推荐处理方法

小程序开发中,现在一般都需要获取微信用户信息,如头像/名字等.这样在用户第一次进入小程序时,微信端会弹出一个是否同意授权的消息提示框.但是如果用户第一时间点击了拒绝,或者用户手误点击了拒绝,如果没有了后续的操作,可能你的小程序就不能使用了,也就会失去这样一位用户.所以,微信官方推荐了一个方法,就是在用户第一次拒绝授权的时候,再给用户一个选择的机会.这样能很好的解决上诉问题.下面以用户需要授权两个权...

2018-04-08 18:55:06 4634 1

原创 Swiper常见用法/问题(滑块滚动方式/点击之后停止自动滚动等问题)

如上图所示:如需要这样的样式在html中写入<div class="swiper-scrollbar"></div>JS中 var swiper3 = new Swiper('#swi_scroll',{ speed:1500, loop:true, scrollbar:'.swiper-scrollbar', scrollbarDraggabl...

2018-04-08 17:41:19 12869 3

原创微信小程序引入wxs文件,根据后台返回数值前端展示不同的文字或颜色.

如图所示，当后台返回的状态status 为 0,1 ，2，3 时。前端展示为图上所示，使用微信的wxs文件的方法将使其变得更加简便新建一个wxs文件，例如function status(id) { var statusJson = {}; var x = ""; var y = ""; switch (id) { case 0: x = "塞红包"; ...

2018-03-19 10:53:17 8231 4

原创关于微信小程序下拉刷新，真机测试不弹回的处理办法

onPullDownRefresh: function() { this.myRecordingA(1,answerUrl); wx.stopPullDownRefresh(); },//myRecordingA 为自己定义的函数，作为刷新时请求服务器的方法// wx.stopPullDownRefresh(); 为停止当前页面下拉刷新在下拉函...

2018-03-16 15:47:10 17882 3

原创 JS在一定范围内取出一定的不重复随机数

//循环创建一个数组的函数 function randomArr(maxcount){ var arr = []; for(var i=0;i<maxcount;i++){ arr.push(i) } return arr; } var arr = randomArr(10); //取出随机数, maxNum为取出随机数的个数 function Ran...

2018-03-02 15:49:02 6096

原创微信小程序文字滚动卡顿的解决办法

目前，针对微信小程序，文字滚动的效果。传统使用定时器，改变px像素点。是会出现卡顿的情况的，动画会非常不流畅。这里建议的是使用css3动画。但是有一个点需要注意的是，就算是使用CSS3属性，我们也不能去更改bottom、top、margin、padding、等值来产生位移。这些方法都会看起来有一些卡顿，导致动画不流畅。经过很多测试，使用 transform：translateX(x) /tran...

2018-02-11 09:27:25 8994 1

原创关于（QQ、微信、微博等）的前端分享处理，以及百度地图的调用

百度分享（微信、微博、QQ、豆瓣等链接的分享写法）HTML:<div class="bdsharebuttonbox"> <a href="##" class="bds_douban fa fa-weibo" data-cmd="tsina" title="分享到新浪微博"></a> <a hre

2018-02-10 16:53:40 539

原创关于微信端打开网页，不支持第三方的微信支付的问题

目前，在关于微信端打开网页，是不支持第三方的微信支付的。就像在支付宝打开页面，不支持微信支付的解决办法一样。通常采用这样的提示方法

2018-02-10 14:15:08 3420

原创关于H5页面点击a标签拉取QQ临时对话的问题

<a href="http://wpa.qq.com/msgrd?v=3&uin=xxx&site=qq&menu=yes"></a>其中'xxx'为输入的临时对话QQ号码。这里注意的是，针对Safari浏览器，暂不支持临时会话的拉取，只有弹出弹出提示框，提示手动添加QQ号码。安卓手机目前是支持TIM以及QQ的...

2018-02-10 14:10:40 3768

原创调用手机数字键盘,QQ浏览器兼容性（输入一个数字，键盘就会隐藏的问题）

调用手机数字键盘，仅需要加上type="number"即可，现在大部分手机浏览器使用这个方法都可以解决。部分手机需要加上 pattern="[0-9]*" 验证（但是QQ浏览器不兼容，会出现，输入一个数字，键盘就会隐藏的问题），删除此段代码即可...

2018-02-10 13:59:01 1702

原创 QQ里面打开H5页面，某些数字会默认变为a标签，字体变蓝，文字换行的解决办法

只需要加上，<meta content="telephone=no" name="format-detection">即可或者手动改变a标签样式。

2018-02-10 13:55:16 1052

原创部分浏览器会将网页某些内容默认设置为关键字的解决办法

部分浏览器会将网站内容的字体设置为关键字，如UC浏览器，会将“”微信“”两个字设置为关键字，字体点击将能搜索，颜色会变成a标签的样式，微信两个字会默认换行，此时仅需要对a标签加上display: inline-block;即可解决换行问题，强制改变a标签的颜色，就能取消字体蓝色的效果。...

2018-02-10 13:50:28 1224

翻译判断当前浏览器类型/判断是否是在微信端

function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; if (isOpera) { return "Opera" }; //判断是否Opera浏览...

2018-02-10 13:47:50 1743

原创关于layer的常见用法

(1)普通消息提示layer.open({ content: content, skin: 'msg', time: 1.5});(2)数据加载中layer.open({ type: 2, shadeClose: false, content: '数据加载中，请稍后'}); (3)关闭所有弹出层layer.closeA...

2018-02-10 13:40:29 668

原创 JS对手机号码和验证码、QQ号码进行验证

//调用layervar layerCommon = function(content) { layer.open({ content: content, skin: 'msg', time: 1.5 });}//手机号码var numberTel = function(num) { if (num == "") {...

2018-02-10 13:38:16 2857

D.uccky的博客