2021年06月_sunly_

原创 uniapp抖音网页版

H5版抖音实现先来看下效果图，阉割版的抖音，删除了右侧跟用户信息相关的代码。这篇文章主要目的是介绍视频模块代码的实现。注释全部在代码中，有不懂的请给我留言。项目使用swiper + video + uni.createVideoContext(videoId, this)实现。API不懂的请参考uniapp官方文档。html<template> <view class="index"> <u-navbar title="我的抖音" title-color.

2021-06-30 11:45:27 932 2

原创 CSS 选取第 n 个标签元素

CSS 选取第 n 个标签元素first-child 表示选择列表中的第一个标签。last-child 表示选择列表中的最后一个标签nth-child(3) 表示选择列表中的第 3 个标签nth-child(2n) 这个表示选择列表中的偶数标签nth-child(2n-1) 这个表示选择列表中的奇数标签nth-child(n+3) 这个表示选择列表中的标签从第 3 个开始到最后。nth-child(-n+3) 这个表示选择列表中的标签从 0 到 3，即小于 3 的标签。nth-las.

2021-06-29 10:10:12 509

原创 CSS中英文换行

中英文自动换行word-break:break-all;只对英文起作用，以字母作为换行依据word-wrap:break-word; 只对英文起作用，以单词作为换行依据white-space:pre-wrap; 只对中文起作用，强制换行white-space:nowrap; 强制不换行，都起作用p{ word-wrap: break-word; white-space: normal; word-break: break-all;}//不换行.wrap { white-s.

2021-06-29 10:05:16 2597

原创 JS，节流、防抖。

1、节流在规定时间内，只触发一次。比如我们设定500ms，在这个时间内，无论点击按钮多少次，它都只会触发一次。具体场景可以是抢购时候，由于有无数人快速点击按钮，如果每次点击都发送请求，就会给服务器造成巨大的压力，但是我们进行节流后，就会大大减少请求的次数。<template> <view class="index"> <u-button type="primary" @click="btnClick">节流</u-button> </.

2021-06-23 16:15:32 132

原创 VUE源码解析：4、手写一个低配版的h函数

创建mysnabbdom文件夹，实现h.js和vnode.js1、实现vnode.js，（vnode的本质是，把传入的参数，组合成对象返回,得到的也就是前文所说的虚拟dom）// 函数的功能，就是把传入的5个参数组合成对象返回export default function(sel, data, children, text, elm) { return { sel: sel, data: data, children: children, text: text, elm:

2021-06-22 11:49:57 241 1

原创 5+API，AD广告组件

创建：全屏视频广告，APP启动后在第一个页面调用onLoad中的代码//激励视频广告onLoad() { //激励视频广告 if(window.plus != undefined){ // console.log('5+APP打开，走这里') let _this = this; var adReward = null; function rewardedVideoAd() { if (adReward) { console.log('正在加载激励视频广告'); .

2021-06-15 17:31:08 733

原创 VUE源码解析：3、虚拟dom和h函数

简介虚拟Dom是把javaScript对象描述成真实的dom结构,（结构参考VUE源码解析：1）

2021-06-11 13:58:45 740 5

原创 VUE源码解析：2、snabbdom介绍与配置，环境搭建

snabbdom.jsSnabbdom 是一个虚拟 DOM 库，专注提供简单、模块性的体验，以及强大的功能和性能。在学vue的过程中，虚拟dom应该是听的最多的概念之一，其借鉴snabbdom.js进行开发。1、创建文件，安装snabbdom这里已经创建好一个空文件夹，打开命令行工具cmdnpm initnpm i -S snabbdom得到如下图文件2、运行环境配置，不能在node.js环境运行，需要在webpack和webpack-dev-server开发环境这里需要注意.

2021-06-11 11:11:52 565 1

原创 VUE源码解析：1、虚机dom

1、真实dom == 虚机dom//真实dom<div class="box"> <h3>标题</h3> <span>小标题</span> <ul> <li>1</li> <li>2</li> <li>3</li> </ul></div>//虚机dom{ sel:'div', // ==> sele.

2021-06-11 10:26:58 98 1

原创城市列表，所有市一级JS数据

module.exports = { list: [{ "letter": "A", "data": [{ "name": "鞍山市", "city_pinyin": "anshan", "city_id": 210300, "py": "as" }, { "name": "安庆市", "city_pinyin": "anqing", "city_id": 340800, "py": "aq" }, { "name": "安阳市",.

2021-06-09 14:07:27 3990 4

原创 TabBar：动态修改内容，显示隐藏，添加红点

uniapp设置TabBar修改tabbar文字内容，图片uni.setTabBarItem({ index: 0,//tabBar 的哪一项，从左边算起 text: 'text',// tab 上的按钮文字 iconPath: '/path/to/iconPath',//图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片 selectedIconPath: '/path/to/selecte

2021-06-03 14:57:14 945

sunluyi的博客