02 2021 档案
摘要：微信头部导航栏可能通过json配置： （文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html） 但是有时候我们项目需求可能需要自定义头部导航栏，如下图所示： 分析上图，我得到如下信息
阅读全文
摘要：大部分情况下我们都是使用微信官方自带的 navigationBar 配置 ，但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。 思路 隐藏官方导航栏 获取胶囊按钮、状态栏相关数据以供后续计算 根据不同机型计算导航栏高度 编写新的导航栏 页面引用自定义导航 一、隐藏官方导航栏 隐藏导航
阅读全文
摘要：一、在官网选择合适的字体图标加入到项目中，然后在页面中打卡在线链接，全选复制代码 二、新建一个字体图标库样式文件(iconfont.css）,然后粘贴刚刚复制的代码 三、使用字体图标 1、首先要在app.vue文件中引入刚刚新建的字体图标库样式 2、使用图标 拓展：微信小程序中引入图标库 【微信小程
阅读全文
摘要：注意：在uni-app中引入阿里巴巴图标库步骤同上。 【uni-app】引入阿里巴巴图标库
阅读全文
摘要：ES6的模块化中，export与export default都可以用于导出常量、函数、文件、模块等，我们可以通过在其它文件或模块中import(常量、函数、文件、模块)的方式导入，但在一个文件或模块中，export、import可以有多个，export default仅有一个。 export的使用
阅读全文
摘要：在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。 ref介绍 ref被用来给元素或子
阅读全文
摘要：父传子 父组件 子组件 子组件props多种类型总结 子传父 子组件 父组件 子组件向父组件传递多个参数 子组件通过$emit触发父组件中的自定义函数，第一个值为自定义函数名，后面的参数是向父组件传的值 子组件 父组件
阅读全文
摘要：效果图： 下拉菜单距离顶部有一定的距离，为了避免鼠标滑到二级菜单的过程中，二级菜单意外收起。可以在二级菜单的外部在包裹一层div，然后二级菜单距离外部包裹的div有一定的距离即可。 .right { display: flex; align-items: center; i { margin: 0
阅读全文
摘要：伪类 伪类更多的定义的是状态，如:hover，或者说是一个可以使用CSS进行修饰的特定的特殊元素，如:first-child 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。 当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。虽然
阅读全文
摘要：data: msgList: [ { title: '你有一笔奖励待发放' }, { title: '1.8元津贴到账，快点去打车吧' }, { title: '单单八折赢iPhone，一路迎春“发”' } ], wxml: <view class="notice"> <view class="le
阅读全文
摘要：前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。 单行文本省略 .ellipsis-line { border: 1px solid #f70505; padding: 8px; width: 400px; ov
阅读全文
摘要：/*iPhone5和iPhone SE*/ @media only screen and (device-width : 320px) and (device-height : 568px) and (-webkit-device-pixel-ratio : 2) { /*code*/ } /* i
阅读全文
摘要：css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的毛玻璃效果、老照片（黑白照片）、火焰效果等。 一、blur(px)高斯模糊 给图像设置高斯模糊。值越大越模糊，默认是0，就是不模糊； 不过，blur模糊的缺点是边缘也会模糊不清。不过，在实际的应用中
阅读全文
摘要：为什么要有hash 和history？ 对于Vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-Router存在的意义。前端路由的核心，就在于——改变试图的同时不会向后端发出请求。 为了达到这一目的，浏览器当前提供了一下两种支持： 1、hash - 即地
阅读全文
摘要：input::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */ input:-moz-placeholder{} /* Firefox版本4-18 */ input::-moz-placeholder{} /* Firefox版本19+ */ inpu
阅读全文
摘要：<div class="container goods-info"> <div class="row goods-tags"> <div class="col-md-2 tag-label">选择版本</div> <div class="col-md-10"> <div class="tags-se
阅读全文
摘要：效果图： 方法一 <table> <tr> <th>姓名</th> <th>性别</th> <th>住址</th> <th>电话</th> </tr> <tbody> <tr> <td>张三</td> <td>男</td> <td>深圳龙岗区</td> <td>131313131313</td> <
阅读全文
摘要：头尾固定，中间区域可以滑动效果是移动端最常见的效果，以京东页面为例。以前开发时常用的方法是用固定布局position:fixed;实现，但是该方法在ios上或者其他机型上会出现问题。现在，可以用flex方法快速实现该布局 <div class="wrap"> <div class="header">
阅读全文
摘要：官网：https://uniapp.dcloud.io/component/swiper 效果图： <view class="swiper"> <swiper :interval="3000" :duration="1000" :indicator-dots="false" :current="to
阅读全文
摘要：一、onLoad 只加载一次，监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参） 二、onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面。 主要区别： 从二级页面返回该页面时，onLoad不会再次加载，而onshow会重新加载。 这
阅读全文
摘要：@input事件 ，当键盘输入时，触发input事件，event.detail = 场景 @input事件想要传递一个参数到方法中 但是同时还要保留原来返回的event 解决方法：$event @input="onKeyInput($event,123)" 运用 <view class="item"
阅读全文
摘要：效果图： uni.setTabBarBadge(OBJECT) 为 tabBar 某一项的右上角添加文本。 eg: uni.setTabBarBadge({ index: 0, text: '1' }) 注意：有些时候，当设置了uni.setTabBarBadge添加文本后，若修改文本值为空或者不存
阅读全文
摘要：因为uniapp基本上都是将页面，或者页面中相同的部分，进行组件化，所以会存在父，子，（子，父）之间的传值的情况，但在某些情况下，可以选择将内容设置为一个全局的变量，并根据需求来进行内容的更新。大大减少了代码的使用，和传值可能遇到的各种复制的计算等等的情况 下面来看看如何设置将一个变量设置为全局数据
阅读全文
摘要：官网：https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitle 一、动态设置当前页面的标题 uni.setNavigationBarTitle(OBJECT) uni.setNavigationBarTitle({
阅读全文
摘要：起初小程序上线时，微信限制了代码包不能超过1MB，后来功能变大变成了2M了，限制大小是出于对小程序启动速度的考虑，希望用户在使用任何一款小程序时，都能获得一种“秒开”体验。但是，2MB也限制了小程序功能的扩展，小程序业务的发展可能需要更大的体积。为了解决这个问题，微信推出了—分包加载。 小程序分包加
阅读全文
摘要：传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。 如下： 官网：https://uniapp.dclo
阅读全文
摘要：condition 启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。 代码示例： "condition": { //模式配置，仅开发期间生效 "current": 0, //当前激活的模式（list 的索引项） "list": [{ "name": "s
阅读全文
摘要：一、在官网选择合适的字体图标加入到项目中，然后在页面中打卡在线链接，全选复制代码 二、新建一个字体图标库样式文件(iconfont.css）,然后粘贴刚刚复制的代码 三、使用字体图标 1、首先要在app.vue文件中引入刚刚新建的字体图标库样式 2、使用图标 其他方法 在uni-app中使用阿里巴巴
阅读全文
摘要：搭建项目之前，请确认好你自己已经安装过node, npm, vue cli。没安装的可以参考下面的链接安装。 如何安装node? 安装好node默认已经安装好npm了，所以不用单独安装了。 如何安装vue cli? 剧场环境已搭建好，开始表演！ 1. 进入一个目录，创建项目 对应命令： vue cr
阅读全文
摘要：1、安装node.js https://blog.csdn.net/qq_43285335/article/details/90696126 node -v 查看版本号 2、安装最新的vue-cli npm install -g @vue/cli # OR yarn global add @vue/
阅读全文
摘要：一、通过元素类型的方法来操作 id获取 getElementById <div id="box"></div> <script> let box= document.getElementById("box"); </script> class获取 getElementsByClassName 注意：
阅读全文
摘要：splice 方法一个数组中最强大的方法，不仅可以对数组进行元素对添加，对数组元素对删除，对数组元素的替换，可以说它集百家与一身，它会直接修改原数组，返回删除的元素。 那么我们就来好好的看看它是如何进行数组的添加、删除与替换工作。 splice 方法的参数传入数量不的不同形成的效果也会不同。 首先它
阅读全文
摘要：uni-app官网：https://uniapp.dcloud.io/api/media/image?id=previewimage 微信小程序官网：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.preview
阅读全文
摘要：<html> <head> <title>屏蔽鼠标右键</title> <script language="javascript"> function click(){ if (event.button==2){ alert('禁止使用鼠标右键！') } } document.onmousedown
阅读全文
摘要：鼠标经过展开下拉菜单 方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"
阅读全文
摘要：列表文字无缝滚动 （说明：省份、姓名、性别都是随机生成） <!-- 领取动态 --> <div class="dynamic"> <div class="activity" id="J_Activity"> <ul> <!-- <li >来自湖南苏**女士成功 领取多功能早餐一台~</li> <li
阅读全文
摘要：方法一 <view class="tabs"> <view class="tabNav"> <view class="{{currentTab==index ? 'cur' : ''}}" wx:for="{{navTab}}" wx:key="index" data-idx="{{index}}"
阅读全文
摘要：<view class="swiperWrap"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular=
阅读全文
浙公网安备 33010602011771号