前端实用案例
马马虎虎敲可爱
这个作者很懒,什么都没留下…
展开
-
微信小程序文本查看更多和收起
微信小程序文本查看更多和收起微信小程序中,有时候文本需要实现这样的功能:1、文本超过n行显示省略号2、省略时,显示 展开/收起 按钮3、文本不超过n行时,不显示省略号和展开/收起按钮实现功能,记录此次开发经验,以便当做笔记查询。实现思路:文本过长显示省略号、展开和收起功能,通过css样式即可实现判断是否显示展开/收起按钮:通过嵌套元素,可以实现text既显示省略号,其高度又是全显示时的高度通过SelectorQuery选择器,获取view及其父元素的高度,判断view高度原创 2020-08-01 18:19:20 · 3110 阅读 · 1 评论 -
微信小程序输入限制:金额限制,名字限制,电话号码限制
微信小程序输入限制:金额限制,名字限制,电话号码限制限制金额输入,只能输入数字和一个小数点限制名字输入,只能输入数字字母中文限制电话号码输入,只能输入数字博主正则不好,实现功能记录下来当做资料查询。//金额输入限制<view> <input value="{{money}}" placeholder="请输入金额" type="digit" bind:change="moneyChange" bindinput="moneyChange" bind:confirm="mo原创 2020-08-01 18:16:17 · 3416 阅读 · 2 评论 -
根据首字母列表选择城市
vue实现根据首字母列表点击选择城市实现点击字母跳转相对应城市,先看下效果先获取城市列表 async getCityList() { //封装的请求调用 const res = await intercept({ method: "general.uppercitylist"//接口参数 }); let arr = []; ...原创 2020-03-03 17:48:08 · 1979 阅读 · 1 评论 -
css实现开关样式
HTML代码 <label class="switch"> <input type="checkbox" checked /> <div class="slider round"></div> </label>用样式实现点击开关开启关闭效果// 开关.switch { position: relative...原创 2019-11-28 09:58:11 · 581 阅读 · 0 评论 -
jquery实现tab切换
jquery实现手机端tab切换####废话不多说,直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...原创 2019-07-08 08:50:57 · 364 阅读 · 0 评论 -
简易弹窗遮罩层
遮罩层弹窗经常用到,记录一下HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>弹窗</title> </head> <body> <div id="showBtn">点击出现</di...原创 2019-07-04 21:13:05 · 492 阅读 · 0 评论 -
原生js实现直接切换轮播图
cssul{ list-style: none; padding:0;margin:0;}.focus img{ display: block;}.focus{ position:relative; overflow:hidden; height: 320px;}.focus ul{ position:absolute; overflow:hidden;} .fo...原创 2019-07-04 21:26:13 · 238 阅读 · 0 评论 -
无缝滚动轮播图(CSS实现)
纯CSS3实现无缝滚动轮播图CSS*{margin: 0;padding: 0;} li{ list-style: none; }.box{ width: 1050px; border:10px solid #ccc; overflow:hidden; margin:150px auto;}.box ul{ width:200%; overflow:hidden; ...原创 2019-07-04 21:33:08 · 1561 阅读 · 1 评论 -
处理URL参数
使用get请求带参数时,参数接在URL上,该如何拿到URL上的参数去进行下一步的操作呢首先先裁切URLvar url = 'https://www.baidu.com/s?name=aa&age=48&sex=male&';//?后面的内容为url的参数 var idx = url.indexOf("?"); var params = url.slice(idx+1...原创 2019-07-04 21:58:58 · 464 阅读 · 0 评论