总结
文章平均质量分 59
米米余
不断学习进步着!
展开
-
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 · 572 阅读 · 1 评论 -
小程序如何实现一直滚动到页面最底部
小程序可以用wx.pageScrollTo({ scrollTop: 0 })实现回到页面顶部,也可以用wx.pageScrollTo({ scrollTop: 99999})实现滚动到页面最底部1.效果图:按钮原处于页面底部,点击后出现橙色块内容,并且橙色块内容自动顶上去2、实现addDiv () { this.theDiv = true setTime...原创 2019-11-12 11:41:16 · 4328 阅读 · 0 评论 -
小程序如何在input中的placeholder中加图标
小程序如何在input中的placeholder中加图标方式二可用,方式一不可用,1.使用mpVue编写小程序代码,首先想到的就是Vue实现的方式,<input :placeholder="placeholdrValue" class="iconfont"> export default { data () { placeholderValue: '/uxe669' ...原创 2019-11-11 10:25:06 · 6097 阅读 · 3 评论 -
css选择器
css选择器有多种,主要可以分为五大类:基本选择器、层次选择器、伪类选择器、伪元素、属性选择器、一、基本选择器 1.通配符选择:[ * ] eg: *{width:10px; } 2.元素选择器:[ . ]eg: .classA{ width:10px;} 3.id选择器:[ # ]eg: #name{ width:10px; }原创 2017-05-20 17:03:04 · 227 阅读 · 0 评论 -
微信小程序:自定义弹出层
自定义弹出层,在弹出层中可键入任意内容。原创 2017-08-17 10:14:50 · 34088 阅读 · 2 评论 -
微信小程序:“+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 · 4658 阅读 · 0 评论 -
微信小程序:点击商品+,出现数量和-
问题描述:商品列表中只有“+”,点击之后出现“-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 · 6869 阅读 · 0 评论 -
mpvue小程序实现老虎机
一、效果图:二、说明很简单的三列数字在Y轴旋转,然后将三列数字布局在一个老虎机的背景图上,点击按钮触发旋转事件,旋转到哪个数字停下来可以设置,可以由后端传回获奖数字。三、代码<template> <div class="page"> <div class="slot-machine"> <img class=...原创 2019-03-05 09:11:07 · 15141 阅读 · 1 评论 -
mpvue小程序实现砸金蛋
一、效果图二、说明1.素材没选好,金蛋和已砸开的蛋大小不匹配,看着不太协调2.mpvue实现砸金蛋主要也是利用css动画,然后使用v-if来控制锤子和开花的金蛋的显隐。三、代码<template> <div class="page"> <div class="stage"> <img src="https:...原创 2019-03-05 18:55:47 · 2682 阅读 · 0 评论 -
小程序弹出弹框后,底层内容禁止滚动
方法一:给背景内容加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 · 5999 阅读 · 0 评论 -
【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 · 330 阅读 · 0 评论 -
双击页面跳转事件
双击页面跳转原创 2017-05-10 21:42:39 · 2599 阅读 · 0 评论 -
单选按钮与复选按钮的相互转换
单选按钮可以和复选按钮相互转换:一、复选按钮转换为单选按钮1. 思想:遍历所有的checkbox,将所有的checkbox都设为没有选中的状态,点击了谁,谁就勾选;当双击同一个checkbox时,就是去掉勾选。js代码:$(function(){ $("#tbody").on("click","input[type=checkbox]",function(e){原创 2017-05-11 17:02:32 · 1539 阅读 · 0 评论 -
注销登陆
1.注销登陆 jsp : 利用表单传输注销指令给后台onclick="return confirm('您确定要退出系统吗?');"> action="../../project/user/logout" method="post"> type="submit" value="注销"> controller:清除session内容,重原创 2017-05-12 17:10:23 · 305 阅读 · 0 评论 -
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 · 1125 阅读 · 0 评论 -
快速理解盒模型
盒模型是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 · 308 阅读 · 0 评论 -
背景图片全屏拉伸显示
将图片设置为背景图有两种方式,一种是用<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 · 4685 阅读 · 0 评论 -
前端获取表格中一行内容
获取表格一行的内容,主要可以用于修改表格内容的功能。此功能需要获取到表格内容,然后将内容填入修改页,利用前端直接获取内容,不用后台再次请求数据。1.表格> type="checkbox"> 姓名 性别 年原创 2017-04-25 15:34:53 · 5010 阅读 · 2 评论 -
js实现<input type="color">改变背景颜色
< input type=”color” >改变北京颜色原创 2017-04-26 19:41:40 · 35783 阅读 · 2 评论 -
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 · 472 阅读 · 0 评论 -
只显示年月的日期控件
火狐和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 · 26559 阅读 · 0 评论 -
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 · 4545 阅读 · 1 评论