cdgogo-优快云博客

原创前端面试-css篇整理

1、元素居中的方法如：实现一个div在不同分辨率下的水平垂直居中.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid pink; width: 100px; height: 100px;}更多详情：https://www.cnblogs.com/cdnotes/p/14

2021-10-22 19:51:50 2055

原创【uni-app】实现下拉刷新、上拉加载更多以及搜索功能

效果图：首先在page页面设置enablePullDownRefresh属性激活下拉{ "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "enablePullDownRefresh":true }}export default { data() { return { orders: [], //列表 page: 1,//当前

2021-09-29 22:21:07 2343

原创 div+css实现个人简历

效果图<!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"> <title&

2021-09-29 15:22:36 2908

原创 canvas 画布效果

空心文本<canvas id="myCanvas" width="300" height="100"></canvas>// canvas绘制空心文本var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');ctx.font = 'italic bold 65px 宋体';ctx.lineWidth = 2;ctx.strokeStyle = '#f91a1

2021-09-26 18:03:03 218

原创【js效果】简单的js效果整理

一、给当前点击项添加样式<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>演習11-1 学籍番号：xxxxxxxx</title> <style> ul { list-style-type: none; } .list1 { width: 200px; height: 30px; border: 1px s

2021-09-26 16:24:47 371

原创实现简单的购物车(加入购物车、统计价格)

效果图：说明：1、实现购物车隐藏和显示切换功能，具体实现效果如下图2、点击“添加购物车”，按钮颜色由红色变为绿色。3、根据jquery.fly.js插件完成添加物品时，物品飞入到购物车效果。4、完成购物车金额自动结算功能。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con

2021-09-26 16:02:29 341

原创 iframe框架

效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .left{

2021-09-19 15:54:47 155

原创 js实现增删上下移动

效果图：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>列表的增删和移动</title> <style> body { background: #ddd; text-align: center } .list { display: inline-block; m

2021-09-17 17:35:16 223

原创根据时间显示问候语

效果图：代码：<!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"> <ti

2021-09-17 17:02:04 485

原创轻量级jQuery轮播图插件HappyImage

效果图：官网：轻量级jQuery轮播图插件HappyImage依赖jQuery （1.8.0 或以上版本）兼容Chrome, Firefox, Edge, Safari, IE9+使用方法<!doctype html><html> <head> <meta charset="utf-8"> <title>HappyImage</title> <style> body{ back

2021-09-16 15:25:53 292

原创点击复制功能、拨打电话

效果图：wxml:<view class="box"> <image src="../../images/online/weixin.png" mode="widthFix" /> <view class="tell">{{weixin}}</view> <view class="tip" data-weixin="{{weixin}}" catchtap="getWeixin">复制去加好友</view>

2021-09-15 17:35:03 185

原创 jQuery无缝轮播插件ft-carousel.js

效果图：官网：jQuery无缝轮播插件ft-carousel.js使用方法1.引入样式和脚本<link rel="stylesheet" href="css/ft-carousel.css" /><script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="js/ft-carousel.min.js" type="text/javascript" char

2021-09-15 16:43:50 393

原创 jquery全屏响应式轮播图插件jquery.flexslider.js

插件描述：这是一款jquery全屏响应式淡入淡出效果轮播图插件。该轮播图插件简单实用，兼容ie8浏览器，可以自动切换播放，带淡入淡出的动画效果。官网：jquery全屏响应式轮播图插件jquery.flexslider.js效果图：基本使用1、引用jquery.js 和 jquery.flexslider.js因为flexslider是基于jQuery的插件，所以前提必须先引用jQuery，再引用flexslider<script type="text/javascript" src=.

2021-09-14 15:25:04 724

原创【微信小程序】表单验证提交

效果图：说明：点击一键预约提交表单时我们需要验证一些必填项以及它们的格式。微信小程序表单验证跟vue的input双向绑定不同，微信小程序只能通过button按钮提交form表单，然后通过监听表单提交方法去获取提交的数据。<view class="forms"> <view class="container"> <image class="bg" src="../../images/formBg.png" mode="aspe

2021-08-19 14:01:32 3026

原创【微信小程序】自定义属性和跳转传参

效果图：说明：从新闻列表跳转到新闻详情通常是需要传参的。<view class="item" catchtap = "goDetail" wx:for="{{news}}" wx:key="index" data-id="{{item.id}}"> <view class="left"> <view class="tit">{{item.title}}</view> <view class="looks"&g

2021-08-18 23:24:32 229

原创【微信小程序】scroll-view实现swiper-item间距轮播效果

效果图：说明：看到效果图时，我们可能首先想到swiper组件实现，但是在实际开发中发现swiper-item的间距是无法实现的。这时我们可以用scroll-view去模拟实现。<scroll-view scroll-x style='display: flex;white-space:nowrap;' class='swiperFuns'> <view class="swiper-slide"> <image class="img" src="../../im

2021-08-18 22:54:41 864

原创【微信小程序】轮播图

效果图：<view class="banner"> <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#ff

2021-08-17 22:26:38 107

原创【uni-app】点击显示和隐藏操作按钮

效果说明：点击当前项显示操作列表，点击其他项先隐藏其他操作在显示当前的操作。点击最外层隐藏所有操作。<template> <view class="wrap" @click="hideIsShow"> <view class="list"> <view class="item flex justify-between" v-for="(item, index) in list" :key="index"> <view class=

2021-08-15 18:41:46 10211 1

原创【uni-app】input输入框宽度自适应

效果图：<view class="tuik flex justify-between"> <view class="left">退款金额</view> <view class="main flex justify-between align-items-center"> <view class="inputs flex" @click="getInputFocus"> <input class="input"

2021-08-11 22:48:30 6713 4

原创【uni-app】picker日期选择器和时间选择器的用法

点击后：<view class="item"> <view class="tit">选择时间</view> <picker class="picker date" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"> <view>{{ date }}</view> </picker> &lt.

2021-08-11 20:20:05 14728 3

原创 forEach()、map()、filter()、every()、some()、find()、findIndex()、reduce()、indexOf()等的用法

forEach()forEach()：用于调用数组每个元素，并将元素传递给回调函数（注意没有办法跳出或终止forEach语句，除非抛出异常）语法：array.forEach(function(currentValue, index, arr), thisValue)currentValue：必填，当前元素。index：可选，当前元素的索引。arr：可选，当前元素所属的数组对象。thisValue：可选，传递给函数的值一般用this值，如果这个参数为空，"undefined"会传递给"thi

2021-08-07 20:47:25 297

原创简单的购物车案例

效果图：<!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-08-07 19:32:11 121

原创【uni-app】星级评价

效果图<view class="evaluate flex align-items-center"> 课程评价 <template v-for="(val, index) in 5"> <image @click="setStar(index + 1)" class="img" :src="star > index ? '../../../static/image/star.png' : '../../../static/image/no-s

2021-08-02 23:24:09 1731 1

原创【uni-app】上传图片并实现删除、预览图片功能

效果图：说明：点击删除按钮可以删除图片，点击图片可以预览图片。<view class="img-box flex flex-wrap"> <view class="img" v-for="(item, index) in imgList"> <image class="pic" :src="item" mode="aspectFill" @click="lookImg(index)"></image> <image @click="del

2021-08-02 23:10:02 1242 2

原创免费的api接口应用实例

腾讯新闻接口地址：腾讯新闻接口实例：代码：// 腾讯新闻接口$.ajax({url: "https://pacaio.match.qq.com/irs/rcd?cid=56&ext=games&token=c786875b8e04da17b24ea5e332745e0f&num=20&expIds=20190106A13PFT%7C20190108A04MLS&page=0",data: "",type: "get",dataType: 'jso

2021-08-02 13:55:26 1504

原创【uni-app】预览图片（单张、多张）uni.previewImage()

uni-app官网：https://uniapp.dcloud.io/api/media/image?id=previewimage微信小程序官网：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.htmluniapp 实现图片预览单图预览和多图预览关键点就是调用uni.previewImage({ current: index, urls: photoList});如果是单图

2021-07-31 17:47:25 32080 2

原创弹性布局（display:flex；）属性详解

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：在不同方向排列元素重新排列元素的显示顺序更改元素的对齐方式动态地将元素装入容器一、基.

2021-07-31 16:19:47 313

原创【uni-app】picker普通选择器的用法

点击前：点击后：<view class="item"> <view class="title">选择学员</view> <view class="line flex justify-between" style="width: 100%;"> <view class="desc"> {{checkStudents[studentIndex].name}} </view> <picker mode="s

2021-07-29 15:56:47 7529 2

原创【vue】根据不同的状态渲染不同的值和class

效果图：<view class="list"> <view class="item flex justify-between align-items-center" v-for="(item, index) in list" :key="index"> <view class="name">{{ item.name }}</view> <view class="time">{{ item.time }}</view>

2021-07-28 22:21:30 1996

原创【uni-app】发送验证码60s倒计时

<view class="item flex align-items-center"> <view class="title">新手机号</view> <view class="newPhone"><input type="text" value="" v-model="newPhone" /></view> <view v-if="showText == true" class="sendCodeBtn" @click..

2021-07-23 18:14:35 2203

原创【uni-app】自定义单选框样式（图片）

说明：uni-app中的radio只能修改颜色和大小，但是往往跟设计图有所差别。下面我们就用其他方式自定义radio单选框的效果。效果图：<view class="item flex justify-between align-items-center" v-for="(item, index) in sexs" :key="index" @click="setSex(index)"> <text>{{ item.value }}</text> <imag

2021-07-23 18:02:43 1925

原创【uni-app】上传一个头像

<view class="item flex justify-between align-items-center"> <view class="left">头像</view> <view class="right" @click="setHead"> <image :src="head" mode="aspectFill" class="head"></image> <image src="../../../sta.

2021-07-23 17:53:05 262

原创【js】动态获取系统时间

方法一(年月日时分秒星期)// js获取当前时间function getTime() { var myDate = new Date(); var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????) var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月) var myToday = myDate.getDate(); //获取当前日(1-31)

2021-07-23 15:16:57 156

原创 js常用的表单验证方法

js常用的表单验证方法长度限制<p>1. 长度限制</p><form name=a onsubmit="return test()"> <textarea name="b" cols="40" rows="6" placeholder="不能超过50个字符！"></textarea> <br /> <input type="submit" name="Submit" value="check">

2021-01-13 16:52:24 227

原创【uni-app】input组件 @input事件(实时监听输入)传参问题

@input事件，当键盘输入时，触发input事件，event.detail = {value}<input class="uni-input" @input="onKeyInput()" />场景@input事件想要传递一个参数到方法中但是同时还要保留原来返回的event解决方法：$event@input="onKeyInput($event,123)"运用效果图：<view class="item" v-for="(item,index) in Pic.

2020-12-21 10:31:02 12445 1

原创【uni-app】easycom模式（自动引入组件）

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。如下：<template> <view class="container"> <uni-list> <uni-list-item title="第一行"><.

2020-12-11 11:25:19 8150

原创【uni-app/微信小程序】分包加载 -- 解决小程序超过2M限制的方法

起初小程序上线时，微信限制了代码包不能超过1MB，后来功能变大变成了2M了，限制大小是出于对小程序启动速度的考虑，希望用户在使用任何一款小程序时，都能获得一种“秒开”体验。但是，2MB也限制了小程序功能的扩展，小程序业务的发展可能需要更大的体积。为了解决这个问题，微信推出了—分包加载。小程序分包加载对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。目录结构：开发者通过在 app.json subpackages字段声明项目分包结构：{ "pag.

2020-12-11 11:15:54 2294

原创【uni-app】带参数跳转

传参页面<view class="comment" @click="comment(detail.goods_id)"></view>methods: { comment:function(id){ uni.navigateTo({ //多个参数用&拼接:url: '../comment/comment?id='+id'&name='+name

2020-12-11 11:11:05 933

原创【uni-app】onload 和 onshow 的区别

一、onLoad只加载一次，监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）二、onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面。主要区别：从二级页面返回该页面时，onLoad不会再次加载，而onshow会重新加载。这点很重要1.如果加载列表页，二级页面对一级的列表页面内容有修改，则以及列表函数应该在onShow中加载，否则可以选择onLoad。2.如果从一个页面携带参数跳转到另外一个页面，在另一个页面获取参数的方式： o

2020-12-11 11:06:26 7051

原创【uni-app】实现轮播图（数字胶囊）

官网：https://uniapp.dcloud.io/component/swiper效果图：<view class="swiper"> <swiper :interval="3000" :duration="1000" :indicator-dots="false" :current="topSwiperIndex" @change="topSwiperTab"> <swiper-item v-for="(item,index) in

2020-12-11 10:57:29 1161

空空如也

空空如也