- 博客(35)
- 收藏
- 关注
RSS订阅原创 mpvue实现仿喜马拉雅banner颜色渐变效果
参考：https://blog.csdn.net/WeiHan_Seven/article/details/103872499用swiper轮播图片，调用色彩分析插件取出图片的配色，然后设置轮播图背景渐进色。下面的Vue文件是效果实现，底下的两个js是用到的两个工具类：ColorThief、rgb颜色转换成16进制颜色缺点：没有处理两个轮播图中间的过渡效果<template> <div class="lnk-page"> <div class="lnk-co
2020-07-30 23:53:40
554
1
原创 常用动画效果
1.翻转：关键是加 perspective，有3d的翻转效果.compose-img{ width: 220px; height: 330px; margin: 10px auto; animation: miss 1.3s ease;}@keyframes miss { from{} to{transform: perspective(600px) rotateY(360deg) scale(1.2);}}2.放大：使用position实现更好.shunk{
2020-05-28 11:08:24
583
原创 小程序快速开发海报图
由于小程序没有开放分享朋友圈的功能，所以直接走曲线救国的方法，生成一张带有小程序码或者其他二维码的海报图，然后将海报图保存至手机相册，通过分享海报图来实现目标。海报图一般都是使用canvas进行绘制的，现在有很多的奖canvas封装好作为一个插件，通过使用插件可以快速开发海报图。使用Painter快速开发...
2020-05-28 11:00:09
558
原创 小程序中对http请求进行加密处理
1. 前言我们使用http协议传输数据很容易被抓包，项目中做了活动模块，里面有很多敏感信息，所以需要对传输的数据进行加密。使用方法是大家常用的，用md5 和AES 加密方式，小程序端和后端约定好加解密的秘钥，小程序端在传输数据前先对请求参数进行md5加密，然后再进行AES加密得到的数据放入请求头部信息中，后端得到数据后进行解密，最后解密信息经过比对成功后才返回请求数据，否则返回数据有误提示。虽然...
2020-03-26 15:49:54
1978
原创 小程序如何实现一直滚动到页面最底部
小程序可以用wx.pageScrollTo({ scrollTop: 0 })实现回到页面顶部，也可以用wx.pageScrollTo({ scrollTop: 99999})实现滚动到页面最底部1.效果图：按钮原处于页面底部，点击后出现橙色块内容，并且橙色块内容自动顶上去2、实现addDiv () { this.theDiv = true setTime...
2019-11-12 11:41:16
4080
原创 小程序如何在input中的placeholder中加图标
小程序如何在input中的placeholder中加图标方式二可用，方式一不可用，1.使用mpVue编写小程序代码，首先想到的就是Vue实现的方式，<input :placeholder="placeholdrValue" class="iconfont"> export default { data () { placeholderValue: '/uxe669' ...
2019-11-11 10:25:06
5946
3
原创 小程序实现中奖动态定时滚动效果
方法：使用小程序swiper组件，设置内容自动滚动：autoplay=‘true’, 内容滚动无缝衔接：circular=“true”, 然后再设置滚动时长：interval=“3000”， 最最主要的是设置同时显示多少个item：display-multiple-items=“4”<div class="award-back"> <div class="awar...
2019-06-13 10:39:52
3369
8
原创 小程序跳转公众号
小程序跳转公众号是通过组件进行跳转的，步骤如下：1.在微信公众平台上关联公众号，然后打开公众号关注组件2.在页面上使用：<official-account></official-account>标签引入公众号关注组件注意组件使用的限制，共有三个限制：当小程序从扫小程序码场景（场景值1047）打开时，（场景值1011）当小程序从聊天顶部场景（场景值1089）中的「...
2019-06-13 09:37:13
6585
原创 小程序弹出弹框后，底层内容禁止滚动
方法一：给背景内容加position：fixed，不可取，因为底部内容会自动滑动到顶部<view class="back-content" :class="'isFixed':isFixed"></view><view class="modal"></view>css：.fixed{ position:fixed; top:0;...
2019-05-31 14:17:51
5921
原创 canvas绘制文本内容自动折行（mpvue实现）
一、说明在微信小程序中使用canvas绘制文本，文本内容是不会自动折行的，所以封装方法使得内容能够自动折行。二、代码 <canvas class="myCanvas" canvas-id="myCanvas"></canvas> onLoad () { let ctx = wx.createCanvasContext('myCanva...
2019-03-07 16:44:21
862
原创 mpvue小程序实现翻牌抽奖
一、效果图二、说明1.主要是用css来实现动画效果2.使用给数组生成随机数，然后利用随机数来打乱数组排序的方式洗牌三、代码<template> <div class="page"> <div class="gridcard"> <div v-for = "(item, idx) in card" :ke
2019-03-06 15:23:54
1280
1
原创 mpvue小程序实现砸金蛋
一、效果图二、说明1.素材没选好，金蛋和已砸开的蛋大小不匹配，看着不太协调2.mpvue实现砸金蛋主要也是利用css动画，然后使用v-if来控制锤子和开花的金蛋的显隐。三、代码<template> <div class="page"> <div class="stage"> <img src="https:...
2019-03-05 18:55:47
2648
原创 背景图片全屏拉伸显示
将图片设置为背景图有两种方式，一种是用标签，一种是用css的background-image:url(“”);样式1.利用标签设置背景图全显示，且自适应屏幕代码：HTMLhtml lang="en">head> meta charset="UTF-8"> title>Titletitle> link href="img.css" rel="style
2019-03-05 09:21:40
2990
原创 mpvue小程序实现老虎机
一、效果图：二、说明很简单的三列数字在Y轴旋转，然后将三列数字布局在一个老虎机的背景图上，点击按钮触发旋转事件，旋转到哪个数字停下来可以设置，可以由后端传回获奖数字。三、代码<template> <div class="page"> <div class="slot-machine"> <img class=...
2019-03-05 09:11:07
15011
1
原创 mpvue小程序营销活动——canvas实现刮刮卡
一、效果图二、说明1.使用mpVue编写小程序刮刮奖，底部的优惠券信息可以随时变化2.如果有需要刮奖涂层可以是一个图片，也可以是纯色背景，依据coating变量是否为空来控制选项。3.如果刮奖涂层是一个图片，在绘制的时候需要注意网络图片不能直接绘制，需要缓存到本地（wx.downloadfile），用本地地址进行绘制，wx.download花费时间，会导致优惠券内容先显示...
2019-03-04 16:36:44
1642
原创 angular封装cordova拍照和图片选择插件
在cordova工程中调用 拍照插件: cordova-plugin-camera,图片插件: com.synconset.imagepicker， 在HTML中的任何标签上加上封装好的属性，都可以调起拍照和图片选择功能/** * 图片选择插件封装为： * 属性：select-image='true' */app.directive("selectImage",function...
2018-08-15 17:31:32
901
原创 cordova-plugin-datepicker插件的使用
cordova-plugin-datepicker插件的使用初次学习cordova，学习调用cordova插件1、添加插件创建cordova工程，添加cordova-plugin-datepicker插件（cordova plugin add cordova-plugin-datepicker）2、在index文件中引用cordova.js注意：cordova.js最好放在...
2018-08-15 17:05:25
480
原创 微信小程序：点击商品+，出现数量和-
问题描述：商品列表中只有“+”，点击之后出现“-1+”，可以对数量进行增减，效果.wxml <view class="add-box"> <image src="/image/reduce.png" class="add-img {{item.numbers==0 ?'none':''}}" bindtap="reduceNum" data-index="{{inde
2017-08-17 10:23:30
6771
原创 微信小程序：“+1”字样的消失与出现（setTimeout的使用）
问题描述：点击商品的“立即购买”按钮后会有“+1”的字样出现，一秒钟后又再次消失。效果：思路：将“+1”效果设置显示和隐藏，以商品list的属性存储，当点击按钮时利用setTimeout函数设置显示1秒钟wxml<view class="special1 {{item.addlabel==0?'none':''}}" >+1</view><button data-index="{{index}}"
2017-08-17 10:18:52
4560
转载 【CSS】最全的CSS浏览器兼容问题
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle;
2017-06-05 17:34:22
313
原创 背景图片全屏拉伸显示
将图片设置为背景图有两种方式，一种是用<img>标签，一种是用css的background-image:url(“”);样式1.利用<img>标签设置背景图全显示，且自适应屏幕代码：HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href
2017-05-24 09:50:12
4530
原创 css选择器
css选择器有多种，主要可以分为五大类：基本选择器、层次选择器、伪类选择器、伪元素、属性选择器、一、基本选择器 1.通配符选择：[ * ] eg: *{width:10px; } 2.元素选择器：[ . ]eg: .classA{ width:10px;} 3.id选择器：[ # ]eg: #name{ width:10px; }
2017-05-20 17:03:04
216
原创 只显示年月的日期控件
火狐和ie浏览器对于<input type="month/date/type">不支持，为了让日期只显示年月日，总结了两种方法。1. jeDate v3.8.2 日期控件代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>jeDate日期控件</title><script type="text/javascript" src
2017-05-19 22:14:59
26421
原创 快速理解盒模型
盒模型是web界面的一个重要概念，理解盒模型后将会对web前端有更加深刻的理解。1.盒模型包括：content、padding、border、margin四部分。（1）content：本身元素，即元素真实内容所占的区域；with，height，min-width，max-with等就是控制content的大小。将盒模型比作人，那么content就是人的身体（2）padding：内边距,包括有padd
2017-05-12 19:11:35
298
原创 button实现一组checkbox的全选与全不选效果
charset="utf-8"/> src="reference/js/jquery-3.2.0.min.js">type="checkbox" name="box"/>读书type="checkbox" name="box"/>思考type="checkbox" name="box"/>思考type="checkbox" name="box"/>睡觉id="all"
2017-05-12 17:33:10
1106
原创 注销登陆
1.注销登陆 jsp : 利用表单传输注销指令给后台onclick="return confirm('您确定要退出系统吗？');"> action="../../project/user/logout" method="post"> type="submit" value="注销"> controller：清除session内容，重
2017-05-12 17:10:23
296
原创 单选按钮与复选按钮的相互转换
单选按钮可以和复选按钮相互转换：一、复选按钮转换为单选按钮1. 思想：遍历所有的checkbox，将所有的checkbox都设为没有选中的状态，点击了谁，谁就勾选；当双击同一个checkbox时，就是去掉勾选。js代码：$(function(){ $("#tbody").on("click","input[type=checkbox]",function(e){
2017-05-11 17:02:32
1512
原创 bootstrap的两种模态框
bootstrap的弹出层bootstrap弹出层有多种触发方式，以下是我用到的几种方式：1.方法一：button中属性触发注意：button中的data-target内容应该和要和弹出层中的id保持一致 data-target=”#mymodal-data”——– id=”mymodal-data”<!--在button上绑定触发弹出层的属性--> <button class="btn btn
2017-05-09 20:59:50
459
原创 前端获取表格中一行内容
获取表格一行的内容，主要可以用于修改表格内容的功能。此功能需要获取到表格内容，然后将内容填入修改页，利用前端直接获取内容，不用后台再次请求数据。1.表格> type="checkbox"> 姓名 性别 年
2017-04-25 15:34:53
4986
2
原创 html的input框
html的input框input框中type属性为不同内容，则输入框就是不同的控件，用好type属性有益于输入内容的校验。1.text文本type为text时，表示输入框可以输入任意内容。<label>姓名：</label><input type="text">2. number数字type为number时，表示输入的内容只能是数字，其他内容输入不了。 ** 注：可以输入字母e，在数学中表示数
2017-04-19 01:38:16
580
原创 jQuery实现div单选与多选
jQuery实现div单选与多选一、单选1、思想：先监听所有的div，点击某个div触发事件。如果被点击的div的border是红色，则remove；否则被点击的div的border不是红色，则遍历所有的div，去掉所有的div的红色border，点击了某个div，再给某个加上border。2、js代码js代码如下：$(".container").on("click",this,function (
2017-04-12 16:26:39
4403
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人