栏目: CSS/HTML

25行代码解决小程序的拖拽排序

//初始点击stratBtn(e){letindex=http.dataIndex(e)[0];//获取当前点击的列表letbusArr=this.data.busArr;//获取列表中的所有数组letpageY=Number(e.touches[0].pageY);//初始点击的Y点坐标letbu...

2021-06-15 32 0 0 阅读全文

Scroll-View的横向滚动

本来以为实现一个横向滚动的view很简单,但是实际上还是有个小坑的。因为scroll-view本身的display:flex不生效。scroll-view的内层view元素需要:display:inline-blockscroll-view的外层元素需要:white-space:nowrap使得内部...

2021-06-15 31 0 0 阅读全文

如何在微信小程序中使用Less详解(最优方式)

写惯了less/sass,但是现在开发小程序缺还是css,很不习惯。在网上搜的教程,要么是gulp,要么就是vscode的Easy-less的插件。传统方式我们来对比,这两种方式的优劣。Gulp前者要对于gulp有简单的了解,但是现在大道其行的webpack来说,gulp用的人也越来越少,而且具有一...

2021-03-18 43 0 0 阅读全文

微信小程序用户授权获取手机号(GetPhoneNumber)

小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码。有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如getPhoneNumber。实现思路:1、通过wx.login获取code,从而获取到用户的openID...

2021-03-18 43 0 0 阅读全文

微信小程序开发篇之踩坑记录

最近参与开发了公司的第一款小程序,开发体验基本类似于基于webview的混合式开发,可以调用官方强大的api,但也有一些坑或者说不习惯的地方。这篇文章从实用性出发,记录了开发过程中的一些问题:1.样式优先级混乱在使用button组件时,发现在class中设置width不生效,下面贴上代码:.my-b...

2021-03-18 52 0 0 阅读全文

关于多行文本超出显示省略号所遇到的问题

今天我遇到的一个算是简单又不简单的问题,为什么说简单呢?是因为实现思路很简单,实现方法不管是自己写也好,还是网上搜也好都能搜出好几种方法。那不简单的地方呢,就是明明我已经按照网上说的代码来写了,可是实现不了我想要的效果,甚至这样的效果我以前做的项目中已经实现了,同样的代码搬到这里就不管用了。让人很是...

2021-06-15 23 0 0 阅读全文

微信小程序里长按识别二维码的实现过程

我们都知道公众号里的二维码可以长按识别,但是小程序限制比较严格,没有办法实现二维码的长按识别,一直以来我都是这样认为的,微信的官方规则里也是这么写的,直到今天上午,我无意间发现一个小程序里的二维码居然可以长按识别,于是就好奇的去研究了一番,结果还真的可以实现小程序里长按识别二维码。不知道是官方的漏洞...

2021-03-18 40 0 0 阅读全文

微信小程序开发之麦克风动画 帧动画 放大 淡出

想做个录音机,第一步就卡在麦克风动画这里了.先上gif.再吐槽.①上面gif中声波的动画是个半成品.没有循环播放.在微信小程序的开发文档上找了很久,也没找到循环模式的参数设置.用setInterval()并不执行动画.我在微信小程序文档动画最下面找到这么一行字.这个锅是不是可以甩出去了?ps:如果有...

2021-06-15 43 0 0 阅读全文

Flex布局总结

最近在写移动端项目,想着把flex布局,重新梳理一遍,总结下。参考地址:www.runoob.com/w3cnote/fle…flex布局Flex是FlexibleBox的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。Webkit内核的浏览器,必须加上...

2021-08-07 35 0 0 阅读全文

Elementui的El-Popover修改样式不生效的解决

el-popover如何修改样式?在使用element-ui的时候,有一个常用的组件,那就是el-popover,但是element-ui官方文档中样式跟用法都比较局限,在使用时都需要改动样式但是问题来了,今天同事改着改着突然发现添加的层叠样式并不生效,只有添加内联样式才能生效,不应该呀?!且看了d...

2021-07-01 39 0 0 阅读全文

Html Form表单基础入门案例讲解

一,表格标签向网页中加入表格–1,概述测试表格标签11132122233132–2,总结table标签用来表示表格tr标签表示表里的一行td标签表示行里的列border设置边框cellspacing设置单元格的间距bgcolor设置背景色width设置宽度height设置高度colspan合并列ro...

2021-07-13 31 0 0 阅读全文

HTML5 Canvas平铺的几种方法

最近在做个网站项目,用到很多canvas,有个需求是drawImage把图片画在canvas里面,图片比较小,需要平铺效果,当背景图。PS(背景图高宽10px,需要画的画布高宽200px)由于一开始是drawImage出来的,所以采用了方法onevarcanvas=document.getEleme...

2021-06-13 43 0 0 阅读全文

使用CSS3实现超炫的 Loading(加载)动画效果

SpinKit是一套网页动画效果,包含8种基于380行C代码实现扫雷小游戏实现的很炫的加载动画。借助CSS3Animation的强大功能来创建平滑,易于定制的动画。SpinKit的目标不是提供一个每个浏览器都兼容的解决方案,而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。(为保证最佳的效果,...

2021-07-14 28 0 0 阅读全文

10分钟了解Z-Index机制

俾众周知,CSS是前端的一门DSL语言,虽然不具备图灵完备,但是它在样式渲染这一领域里更加形象的描述了一个事物,在当下娱乐、信息、多元化时代背景下CSS的地位越发凸显,今天我们来聊聊CSS中的Z-index属性回顾Z-index的例子.box1{width:100px;height:100px;ba...

2021-07-13 39 0 0 阅读全文

微信小程序自定义Tabbar组件

本文实例为大家分享了微信小程序自定义tabbar组件的具体代码,供大家参考,具体内容如下由于项目需求,必须自己写组件:第一步:在App.json中配置tabBar,自定也组件也必须配置,"custom":true,list里配置所有的tabbar页面。"tabBar&q...

2021-03-16 51 0 0 阅读全文

小程序实现商品属性选择或规格选择

本文实例为大家分享了小程序实现商品属性选择或规格选择的具体代码,供大家参考,具体内容如下实现效果1.wxml{{item.name}}{{item.name}}2.jsdata:{//数据list:[{"goods_option_id":1737,"option_id&...

2021-03-16 46 0 0 阅读全文

H5唤醒APP实现方法及注意点总结

作为前端开发人员经常会有这样的需求,如果某个用户安装了自己的APP就打开APP首页或则指定页面,如果没有安装APP就跳转到相应下载页面。这样的一个需求也是拉新和裂变必不可少的环节,所以是需要我们去解决的。今天来看看到底如何实现呢?跳转APP方式目前实现该功能的有两种比较好的方式:URLScheme、...

2021-06-21 44 0 0 阅读全文

微信小程序全局状态的深入讲解

在微信小程序中,可以利用App.js的globalData作为中间桥梁,在Page,Component之间,包括页面与页面,页面与组件,组件与组件之间传递需要传递的信息。但是,我们不能及时的知道globalData下的变化,在新建小程序的官方的默认事例中,获取UserInfo这一网络操作有延迟的,为...

2021-03-16 40 0 0 阅读全文

Js+Css自定义Alert和Confirm样式

一、自定义样式1.1自定义Alert样式1.2自定义Confirm样式二、使用方法2.1Alert()myAlert("title","message",function(){//callback})2.2Confirm()myConfirm("ti...

2021-08-03 26 0 0 阅读全文

一文带你入门Web Components

本文将介绍一些WebComponents的相关知识,最后通过一个组件封装的案例讲解带你入门WebComponents。什么是WebComponentsMDN:WebComponents是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们。WebC...

2021-08-03 39 0 0 阅读全文