换日线°-CSDN博客

原创微信小程序拼图游戏（有效果图）

效果图仿win10拼图游戏，默认数字拼图，可以自己上传图片进行拼图，图片缓存本地，同一横同一竖可以进行移动，不需要一个一个移动。下载地址：https://download.csdn.net/download/qq_43764578/69468396遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。...

2021-12-23 16:44:50 4575

效果图下载地址：https://download.csdn.net/download/qq_43764578/39637839 如果想要的效果是按指定宽度高度进行裁剪有一篇文章可以提供参考参考地址：https://blog.csdn.net/qq_43764578/article/details/121212662?spm=1001.2014.3001.5501 遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。...

2021-11-10 15:39:20 1220 1

原创微信小程序连续多个特殊字符自动换行解决方法

连续多个特殊字符自动换行解决方法

2025-04-28 17:37:30 827

原创 CSS常遇到自适应高度动画、带三角气泡阴影一行样式解决

常遇到自适应高度过渡动画、带三角气泡阴影一行样式解决

2025-04-25 10:33:14 320

原创微信小程序根据图片生成背景颜色有效果图

根据图片算出背景颜色

2025-04-24 15:46:23 317

原创 CSS简单实用的加载动画、骨架屏有效果图

加载动画、骨架屏

2025-04-24 10:58:54 237

原创微信小程序拖拽排序有效果图

微信小程序拖拽排序

2025-04-22 18:34:21 372

原创微信小程序文字混合、填充动画有效果图

CSS文字填充、色差、填充动画有效果图

2025-04-17 17:01:49 466

原创微信小程序三种裁剪动画有效果图

微信小程序三种裁剪动画有效果图

2025-04-17 11:42:13 300

原创 CSS进度条带斑马纹动画(有效果图)

CSS进度条斑马纹带动画有效果图

2025-04-17 11:35:52 584 1

原创微信小程序边框容器带三角指向

边框容器带三角指向,CSS三角边框

2025-04-16 15:26:20 374

原创微信小程序数字滚动效果

数字滚动效果有效果图

2025-04-16 12:50:50 1234

原创微信小程序无缝衔接弹幕效果纯CSS

跑马灯、弹幕、css无缝衔接

2025-04-14 11:14:40 463

原创微信小程序仿胖东来轮播和背景效果（有效果图）

仿胖东来首页轮播和背景效果

2024-05-23 18:27:52 790 1

原创微信小程序酒店选择日期和入住人数（有效果图）

InCheckin 选择的日期信息。IntimeCur 组件选择的日期。timeDataArr 显示的日历。peopleArr 入住人数信息。入住一次性最多选择三十天。默认获取三个月日期数组。用的是uni-app。

2024-04-19 17:57:39 1688

原创微信小程序日期增加时间完成订单失效倒计时（有效果图）

.js遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。

2024-04-19 17:28:42 614

原创微信小程序五子棋（有效果图）

效果图总共100行js代码，大于8步开始执行胜负判断，主要从落子的位置去判断，左4、右4就是横边上4、下4就是竖边左上4、右下4就是左斜右上4、左下4就是右斜下载地址：遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。...

2022-03-10 12:19:51 2363

原创微信小程序井字棋（有效果图）

效果图.wxml<view class="title"> <view wx:if="{{currindex < 9 || defeat}}"> {{defeat?'胜出方：':'轮到了：'}}<span class="span">{{defeat?(outindex?'○':'x'):(outindex?'x':'○')}}</span> </view> <view wx:else>平局</view&g

2022-03-09 11:45:54 948 2

原创微信小程序别踩白方块（有效果图）

效果图.wxml<view class="block_index"> <view wx:for="{{noe_list}}" wx:key="block_list" class="block_list" style="top:{{item.top}}vh;{{!ction || item.top < -24?'':'transition: top linear 0.1s;'}}" > <view wx:for="{{item.arr}}" w

2021-12-27 17:02:08 1009 2

原创微信小程序canvas实现画图可以恢复上一步操作以及从头演示（有效果图）

效果图.wxml<canvas disable-scroll="{{true}}" style="width:100%;height:400px;background-color: #fff;" type="2d" id="canvas" bindtouchstart="canstart" bindtouchmove="canvasmove"></canvas><button bindtap="save">保存画布</button><bu

2021-11-12 15:38:20 1810

原创微信小程序裁剪图片大小（有效果图）

效果图.wxml<button bindtap="uploadtap">上传图片</button><image style="width: 100%;" mode="widthFix" src="{{canfile_image}}"></image><canvas canvas-id="myCanvas" id="myCanvas"></canvas><view class="canvas_model" wx:if="

2021-11-08 17:49:11 2685

原创 VUE封装axios请求配置全局弹窗及跳转（有效果图）

效果图弹窗组件名cu-model.vue<template> <div class="in_alert" v-if="show"> <span class="in_text-overflow">{{content}}</span> </div></template><script>export default { props: ['show', 'content']}</script>

2021-11-03 17:07:14 1462

原创微信小程序保存图片到手机相册（封装全局使用）

效果图.wxml<image src="{{images}}"></image><button bindtap="onSaveToPhone" class="btn button-hover" > 保存图片到手机</button>.jsPage({ data: { images: "/images/logo.png", }, onSaveToPhone(){ var that = this getApp().o

2021-10-18 15:13:04 1251

原创微信小程序滑动验证拼图（有效果图）

效果图.wxml<button bindtap="visidlisd">滑动验证</button><view class="slide_model" wx:if="{{slidebel}}"> <view> <view class="canvas_img"> <canvas style="width: 300px; height: 104px;" canvas-id="fir

2021-09-25 14:55:14 2971 2

原创微信小程序毫秒转天时分秒（有效果图）

效果图.wxml<view wx:if="{{time.deadline > 0}}"> <view>单处理-转天时分秒 <view>{{time.down}}</view> </view> <view>单处理-转时分秒 <view>{{time.huly}}</view> </view></view><view wx:for="{{a

2021-07-29 17:31:19 994

原创微信小程序弹出层禁止页面滚动

效果图如下是否随页面滚动 catchtouchmove true开启 return关闭.wxml<button bindtap="switch">上下滑动({{catchtouchmove?'开':'关'}})</button><button bindtap="modal">弹出层</button><view bindtap="modal" class="modal" wx:if="{{modalName}}" catchtouc

2021-07-01 14:16:20 563

原创微信小程序页面跳转传参（对象、数组）

跳转事件jump:function(e){ let array = { id:1, name:'张三' } wx.navigateTo({ url: '/pages/index/index?array='+JSON.stringify(array), })}跳转页面onLoad:function(options){ console.log('跳转事件参数',JSON.parse(options.array))},遇到问题可以看我主页加

2021-01-15 13:57:14 1966

原创微信小程序带参数返回上级页面

返回上级页面//在需要执行带参数返回上级页面的地方加上let pages = getCurrentPages(); // 获取页面栈let returnpage = pages[pages.length - 2]; // 上一个页面returnpage.setData({ values: '上个页面接收的参数'})wx.navigateBack({ delta: 1})上级页面onShow(){ console.log('传来的参数:',this.data.values)}

2020-10-31 18:19:04 524

原创微信小程序动画效果CSS---有效果图

效果图如下所示不懂得可以看注释都有说明主要就是理解怎么用你会用出什么效果.wxml<view class="scroll"></view><image class="borimg" src="http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180402/e58cbe3035f343c082557b42a00e4d2e.jpeg"></image><image

2020-10-24 17:21:39 2781

原创微信小程序打卡签到页面（有效果图)

效果图如下所示.wxml<view class='gs_banner'> <view class='gs_continue'> <view>每日坚持签到</view> <view>总共签到：<text>{{continuity}}</text>天</view> </view></view> <view class='gs_si

2020-09-18 16:02:53 13608 20

原创 VUE生成海报（HTML转图片）

效果图如下所示引用插件，使用插件//引用插件npm install qrcodejs2 --savenpm install html2canvas --save//在需要生成海报的页面使用import html2canvas from 'html2canvas';import QRcode from 'qrcodejs2';生成海报代码//template<div class="burr_f-haibao" id="posterHtml" v-if="posterIm

2020-09-11 09:33:11 3082 1

原创 VUE监听页面滚动到底部

methods：{ Scrollbottom () { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; let clientHeight = document.documentElement.clientHeight; let scrollHeight = document.documentElement.scrollHeight; if (scrollTop + clientH

2020-08-25 17:05:27 4639 2

原创微信小程序实现转盘抽奖(有效果图)

效果图如下所示.wxml<view class="index"> <view class="xian"></view> <view class="xian"></view> <view class="xian"></view> <view class="detail">一等奖</view> <view class="detail">二等奖</view>

2020-08-18 17:34:08 8521 5

原创微信小程序懒加载数据（动画效果显示）

效果图.wxml<view class="index"> <view wx:for="{{detail}}" wx:key="index" class="center {{item.hide?'animation':''}}" id="curr{{index}}"> <view wx:if="{{item.hide}}"> {{item.name}}{{index}} </view> </view>&lt

2020-07-21 10:46:04 2491

原创微信小程序实现点击页面地方出现文字

效果图如下所示.wxml<view class="index" bindtap="index"></view><text class="text" style="left: {{text_ax}}px;top: {{text_ay}}px;opacity: {{opacity_a}};" wx:if="{{text_a}}"> {{text_a}}</text><text class="text" style="left: {{text

2020-07-20 17:49:38 2621

原创微信小程序12行js代码自己写个滑块功能

效果图如下所示.wxml<view class="jindu" bindtap="cuin"> <view class="xian" style="width:{{towards}}px;"> <view class="yuan" bindtouchmove='touchMove'></view> </view></view><view class="bfb">{{percen}}%</vie

2020-07-14 11:04:09 497

原创微信小程序分享朋友圈(目前只支持安卓)

官方文档如下: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html首先要自定义转发然后才能使用朋友圈分享.jsPage({ data: { }, /**右上角转发*/ onShareAppMessage: function () { return { title: '转发标题', path: '转发路径', imageUrl: '转发图标'

2020-07-13 09:37:05 702

原创微信小程序组件库（简洁极客）---附源码

效果图如下所示,正在逐渐完善。目前只完成了弹出层和加载，后续会继续更新，时间是不定时的有时间就会写一点，你需要什么样的功能可以在下方评论反馈我可以加上去弹出层组件参数加载组件参数链接: https://pan.baidu.com/s/1kh_4jfkXyPc4fN9NACH-cA 提取码: dxe8觉得我写的还不错，对你有帮助可以微信打赏哦。有什么问题欢迎评论留言，我会及时回复你的...

2020-07-08 17:09:02 1772 2

原创 VUE快速简单搭建UEditor富文本编辑器

效果图如下所示Installationnpm i vue-ueditor-wrap下载 UEditor官网链接: http://ueditor.baidu.com/website/download.html我的链接: https://pan.baidu.com/s/1zA9RgdeMjMQNSPygWq8Vaw 提取码: qjds将下载的压缩包解压并重命名为 UEditor,放入你项目的 static 目录下，如果你使用的是 vue-cli 3.x，可以把 UEditor 文件夹放入.

2020-05-27 10:46:19 1410 3

原创微信小程序翻牌抽奖(带动画）- - -附效果图

效果图如下所示这里做的比较简陋，就花了一点时间实现了翻牌抽奖效果,提供思路.wxml<view class="button" bindtap="again">重新翻牌</view><view class="curin-index"> <view bindtap="{{whether?'':'tamin'}}" wx:for="{{9}}" wx:key="index" data-index="{{index+1}}" class="currin {{.

2020-05-25 11:38:57 8457 2