换日线°-CSDN博客

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

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

2022-03-10 12:19:51 1498

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

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

2021-12-23 16:44:50 4115

效果图下载地址：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 1021 1

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

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

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

原创微信小程序日历包含（阴历）- - -附效果图

效果图如下所示下载地址：https://download.csdn.net/download/qq_43764578/12414346有需要的小伙伴可以下载有什么问题欢迎评论留言，我会及时回复你的

2020-05-13 11:48:12 2190 1

原创仿京东微信小程序（效果图）

首页分类推荐购物车我的搜索(感觉这个是这里面最复杂的)详情因为不能上传视频，上传图片大小受到限制很多功能细节没有完全展示，想看完整手机版的可以访问QQ:1010753897 空间下载地址：https://download.csdn.net/download/qq_43764578/12314561有什么问题欢迎评论留言，我会及时回复你的...

2020-05-10 14:08:11 2739 3

原创微信小程序聊天功能（仿微信）- - -附效果图

效果图如下所示语音功能因为是在电脑上所以不能使用,想看完整手机版的视频可以加QQ:1010753897 查看完整视频有什么问题欢迎评论留言，我会及时回复你的

2020-05-09 17:27:52 4601 9

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

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

2024-04-19 17:57:39 998

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

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

2024-04-19 17:28:42 463

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

效果图.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 769 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 869 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 1549

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

效果图.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 2422

原创 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 1255

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

效果图.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 1138

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

效果图.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 2492 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 837

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

效果图如下是否随页面滚动 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 464

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

跳转事件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 1742

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

返回上级页面//在需要执行带参数返回上级页面的地方加上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 460

原创微信小程序动画效果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 2612

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

效果图如下所示.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 12146 16

原创 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 2941 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 4430 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 8158 4

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

效果图.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 2397

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

效果图如下所示.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 2474

原创微信小程序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 426

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

官方文档如下: 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 647

原创 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 1343 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 7651 1

原创 CSS 实现微信小程序半圆无线滚动（过渡动画）

效果图如下所示.wxss<view class="holder"> <view class="preloader"> <view></view> </view></view>.wxml.holder{ width: 100%; float: left; height: 60rpx; text-align: center; position: relative; margin-to.

2020-05-19 15:00:29 1563

原创微信小程序跑马灯(真机效果一致)

效果图如下所示.wxml<view class="lamp"><view class='lamp-text' style='--marqueeWidth--:{{-width_mal}}px;--speed--:{{rolltime}}s;'> <view style="margin-left：{{starspos}}rpx;font-size:{{font_size}}px"> {{text}} </view></view&.

2020-05-13 15:48:29 842

原创微信小程序获取阴历

效果图如下所示calendar.jslet lunar = { tg: '甲乙丙丁戊己庚辛壬癸', dz: '子丑寅卯辰巳午未申酉戌亥', number: '一二三四五六七八九十', year: '鼠牛虎兔龙蛇马羊猴鸡狗猪', month: '正二三四五六七八九十冬腊', monthadd: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334], calendar: [0xA4B, 0x5164B, 0x6A5, .

2020-05-11 18:41:55 1218 2

原创微信小程序获取当前时间以及获取星期几

效果图如下所示util.jsfunction formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds() return [year, mon.

2020-05-11 17:53:17 8531 1

原创微信小程序海报功能（canvas）- - -附效果图

效果图如下所示.wxml<canvas canvas-id="shareBox"></canvas>.wxsscanvas{ width: 100%; height: 100vh; overflow: hidden;}.jsPage({ data: { deviceWidth:'', deviceHeight:'', }, onShow:function(e){ //绘制canvas图片 var that .

2020-05-11 14:26:30 1469

原创微信小程序用CSS编辑海报（canvas）

效果图如下所示.wxml<view class="canvas-box"> <painter palette="{{template}}" bind:imgOK="onImgOK" /></view><image bindtap="imagxin" src="{{imagePath}}"></image>.csspage{ overflow: hidden;}.canvas-box{ width: 1px; h.

2020-05-11 11:59:56 464

原创微信小程序录音功能(简易教学)

.wxml<button bindtouchstart="touchdown" bindtouchend="touchup">按住录音</button><button catchtap="play">播放录音</button>.jsPage({ data: { frequency:'', }, //手指按下 touchdown: function (e) { console.log("手指按下了...") v.

2020-05-09 13:37:33 2477

原创微信小程序答题功能（二）- - - 按选项答题

效果图如下所示.wxml<view class="index-top"> <view class="{{index <= curring && curring != 0?'top-blue':'top-currin'}} {{index > 0 && curring < 2?'top-fint':'top-ping'}...

2020-05-06 11:49:51 7740 9

原创微信小程序答题功能（一）- - - 倒计时答题

效果图如下所示时间到了也会直接返回到上级页面因为只能上传5M所以就没录了跳转页面.wxml<button bindtap="questions" style="margin-top: 50rpx;">去答题</button>.jsPage({ data: { }, onShow:function(e){ let answer = w...

2020-04-30 14:57:32 7425 2