Ylk_IT-优快云博客

原创 js 处理千分位

un-app js 处理千分位body引用 <text class="hot-text">{{addThousands(+data.views)}} 热度</text>引用文件 import {addThousands} from '@/utils/function.js'单独做个js文件export const addThousands=(val)=> { const num=parseInt(val) if(num<1000) return n

2021-08-03 14:45:51 244

原创 uni-app vue2处理数据排名问题

uni-app 处理数据排名问题效果图父组件<hot-list-item v-for="(item,index) in arr" :key="index" :rank="index+1" />儿组件<view class="item-box-left"> <ranking :rank="rank"/></view>然后接受父组件<script> export default { props:{ rank:{

2021-08-02 20:06:19 329

原创 uni-app吸顶效果

uni-app吸顶效果<view class="sticky"> <my-tabs :tabs="tabs" :defaultIndex="defaultIndex" @tabClick="tabClick"/></view>.sticky{ position: -webkit-sticky; position: sticky; z-index: 999; top: 0; /* #ifdef H5 */ top: 44px; /* #endif *

2021-08-02 19:39:37 553

原创解决uni-app scroll-view的滚动条隐藏滚动条，但依旧具备可以滚动的功能

记得自己更换类名：/deep/ .uni-scroll-view::-webkit-scrollbar { /* 隐藏滚动条，但依旧具备可以滚动的功能 */ display: none; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; color: transparent; }...

2021-07-30 16:05:24 612

原创微信小程序tab切换

微信小程序tab切换(vue2)写法：父组件：请求数据 <view> <my-tabs :tabs="tabs" :defaultIndex="defaultIndex" @tabClick="tabClick"/> </view>父组件方法：export default { data() { return { tabs:[], defaultIndex:0, }; },

2021-07-30 16:02:08 277

原创时间戳转换成js格式2

时间戳转换成js格式先下载插件 yarn add dayjs在utils中创建formater.js/** * 时间戳转化为年月日时分秒 * number: 传入时间戳 * format：返回格式，支持自定义，但参数必须与formateArr里保持一致 */ function formatTime(number,format) { var formateArr = ['Y','M','D','h','m','s']; var returnArr

2021-07-18 20:07:06 130

原创时间戳转换成js格式

时间戳转换成js格式先下载插件 yarn add dayjs然后按需导入/* 时间戳 */import dayjs from 'dayjs'import relativeTime from 'dayjs/plugin/relativeTime.js'import 'dayjs/locale/zh-cn'dayjs.extend(relativeTime) 然后定义一个变量//methods//时间戳 const _data=(row, column, cellValue, ind

2021-07-18 19:54:58 146

原创 vue3.0实现穿梭框单点

vue3.0实现穿梭框单点*{margin:0; padding:0;} li{list-style: none;} a{text-decoration: none; color: #333;} button{border:none;} input{outline:none;} textarea{resize:none;} em,i{font-style: normal;} .wrap{

2021-07-13 20:39:56 368

原创 vue2.0创建项目和vue3.0的区别

vue2创建项目vue2.0和vue3.0的区别就是选择2.0 3.0 项目就好了打开cdm命令界面进入桌面1.vue create +文件名字选择最后一个等待中。。。。这样就好了，接下来 cd one_ove npm run serve 项目就可以运行啦这样项目就成功了...

2021-07-13 14:49:00 508

原创实现单选穿梭框

实现单选穿梭框<!DOCTYPE html> <head> <meta charset="UTF-8" /> <title>穿梭框</title> <style type="text/css"> ::-webkit-scrollbar { width: 0px } .select { width: 600px; height: 220px; margin: 100px auto;

2021-07-12 15:51:14 403

原创 vue实现TodoList(2)

vue实现TodoList记得引用vue.js html,body { margin: 0; padding: 0;}button { margin: 0; padding: 0; border: 0; background: none; font-size: 100%; vertical-align: baseline; font-family: inherit; font-weight: inherit; color: inherit; -webkit-appe

2021-07-11 15:36:31 114

原创用localStorage实现TodoList效果

用localStorage实现TodoList效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo3</title> <link rel="st

2021-07-11 15:23:07 174

原创 vue实现TodoList

vue实现TodoList<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ToDoList</title> <link rel="stylesheet"

2021-07-11 15:21:10 152

原创实现雨滴效果

实现雨滴效果* { margin: 0; padding: 0;}li { list-style: none;}html,body { width: 100%; height: 100%;}.wrap { width: 100%; height: 100%;}.wrap .bg { width: 100%; height: 100%; background: url(../light.jpg) no-repeat; background-

2021-07-11 15:15:50 165

原创 css实现mask效果

css实现mask效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 650px; height: 498px; background:url(b

2021-07-10 20:53:54 289

原创 css实现❤型效果

css实现❤型效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo3</title> <style> *{margin:0; padding:0;} .box{ width: 240px; height: 400px;

2021-07-10 20:52:34 141

原创原生实现点击li变颜色

实现简单的点击li变颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt

2021-07-10 16:33:17 1121

原创 css实现正方体旋转效果

css实现正方体旋转效果style样式*{margin: 0; padding: 0;}li{list-style: none;}body{ background: url('image/ma.jpg') 0 0 no-repeat;/* 自己更换背景图片 */ background-size: cover;}.body{ transform-style: preserve-3d; }.box{ width: 400px; height: 4

2021-07-10 15:14:46 252

原创 css实现导航二级菜单

css实现导航二级菜单*{margin:0; padding:0;}li{list-style: none;}a{text-decoration: none; color: #333;}button{border:none;}input{outline:none;}textarea{resize:none;}em,i{font-style: normal;}.orange{ color: #fa0;}.clearfix::after{ content:""; c

2021-07-10 15:13:46 345

原创实现简单的表单验证提交

实现简单的表单验证提交<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style > *{ margin: 0; padding: 0; } form{ margin: 0 auto; background: #ccc; width: 600px; }

2021-07-09 19:23:30 139

原创实现轮播图透明度切换+自动走

实现轮播图透明度切换+自动走style部分<style> li{list-style: none;} *{margin:0; padding:0;} .banner{ width: 590px; height: 470px; margin: 50px auto; border: 2px solid green; positio

2021-07-09 19:13:51 319

原创实现发布效果

实现发布效果style部分<style> *{margin:0; padding:0;} li{list-style: none;} .wrap{ width: 560px; padding: 30px; background: #dfdfdf; margin: 100px auto; } .wrap p{

2021-07-09 19:09:38 61

原创计时器效果

简单的计时器效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo1-计时器</title> <style> #box{ font-size: 30px; color:red; } </style>&l

2021-07-09 19:05:49 126

原创验证邮箱、密码正则

过滤非法字符验证邮箱：var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;字母+数字：let reg = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,20}$/字母或数字：let reg = /^[a-z0-9]{6}$/

2021-07-09 19:02:14 185

原创实现轮播图效果

原生实现轮播图效果style部分<style> *{margin:0; padding:0;} li{list-style: none;} .banner_wrap{ width:590px; height: 470px; border: 1px solid #000; margin: 50px auto; position:

2021-07-09 18:58:17 75

原创实现tab切换效果

原生实现tab切换效果style部分 <style> #title span.select{ background: red; } #list li{ display: none; } #list li.show{ display: block; } </style>body部分<div id="title"> <span c

2021-07-09 18:54:41 272

原创实现导航联动效果

实现导航联动效果style部分<style> *{margin:0; padding:0;} li{list-style: none;} .header{ height: 100px; background: #333; } .header_con{ width: 1000px; margin: 0 auto;

2021-07-09 18:51:39 352

原创放大镜效果

实现原生放大镜效果style部分<style> *{margin:0; padding:0;} li{ list-style: none; } .clearfix::after{ content:""; clear:both; display: block; } .wrap{ w

2021-07-09 18:47:23 77

原创原生实现拖拽效果

简单版本的拖拽效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title> <style> #box{ width: 100px; height: 100px; background: green;

2021-07-09 14:45:12 60

原创类库、插件、组件、框架的区别

类库、插件、组件、框架的区别类库jQuery 、Zepto 、underscore 等类库主要提供了真实项目中常用的方法，类似于一个工具包，相对于这个工具包快速开发项目。插件Swiper、echars、superslide、banner、tab选项卡插件、drag拖拽插件、iscroll 下拉刷新(局部滚动) 相当于把我们项目中某一功能进行了封装组件库Bootstrap、weui、mui等相当于多个插件的集合体，一般可能提供了js功能，同时将结构、样式实现，可以快速开发代码（构

2021-07-07 20:40:26 1487

原创 flex布局

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。W3C提出了一种新的方案----Flex布局，可以简便、完整地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{display: flex;}行内元素也可以使用Flex布局。.box{display: in

2021-07-07 20:35:00 84

原创 css样式实现三角形

css样式实现三角形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo3</title> <style> /* 使用flex布局让他们处于同意水平方向 */ .wrap{ background: #ccc; display:

2021-07-07 20:01:52 118

原创 vue知识总结点

1.Vue的概念?(1).vue是目前目前比较火、比较流行的框架。(2).vue是目前三大主流框架之一， ReactJs AngularJS(3).Vue.js是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（渐进式：由浅入深由易到难的方式）2.Vue的特点??易用、灵

2021-07-07 19:32:48 283

原创鼠标点击出现小爱心的效果

鼠标点击出现小爱心的效果**下面是js内容，引入即可！ <script> (function(window,document,undefined){ var hearts = []; window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozReques

2021-07-07 19:21:07 348

Ylk_manong的博客