
微信小程序
换日线°
你只管努力 最坏不过大器晚成 WX1010753897
展开
-
微信小程序自行diy选择器有效果图
微信小程序diy选中器原创 2025-05-21 14:50:32 · 341 阅读 · 0 评论 -
微信小程序单双周选择排序有效果图
单双周快捷选择,最小字数显示原创 2025-05-12 14:00:34 · 388 阅读 · 0 评论 -
微信小程序文字混合、填充动画有效果图
CSS文字填充、色差、填充动画有效果图原创 2025-04-17 17:01:49 · 480 阅读 · 0 评论 -
微信小程序三种裁剪动画有效果图
微信小程序三种裁剪动画有效果图原创 2025-04-17 11:42:13 · 309 阅读 · 0 评论 -
CSS进度条带斑马纹动画(有效果图)
CSS进度条斑马纹带动画有效果图原创 2025-04-17 11:35:52 · 601 阅读 · 0 评论 -
微信小程序酒店选择日期和入住人数(有效果图)
InCheckin 选择的日期信息。IntimeCur 组件选择的日期。timeDataArr 显示的日历。peopleArr 入住人数信息。入住一次性最多选择三十天。默认获取三个月日期数组。用的是uni-app。原创 2024-04-19 17:57:39 · 1697 阅读 · 0 评论 -
微信小程序日期增加时间完成订单失效倒计时(有效果图)
.js遇到问题可以看我主页加我Q,很少看博客,对你有帮助别忘记点赞收藏。原创 2024-04-19 17:28:42 · 620 阅读 · 0 评论 -
微信小程序五子棋(有效果图)
效果图总共100行js代码,大于8步开始执行胜负判断,主要从落子的位置去判断,左4、右4就是横边上4、下4就是竖边左上4、右下4就是左斜右上4、左下4就是右斜下载地址:遇到问题可以看我主页加我Q,很少看博客,对你有帮助别忘记点赞收藏。...原创 2022-03-10 12:19:51 · 2378 阅读 · 0 评论 -
微信小程序井字棋(有效果图)
效果图.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 · 959 阅读 · 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 · 1012 阅读 · 2 评论 -
微信小程序拼图游戏(有效果图)
效果图仿win10拼图游戏,默认数字拼图,可以自己上传图片进行拼图,图片缓存本地,同一横同一竖可以进行移动,不需要一个一个移动。下载地址:https://download.csdn.net/download/qq_43764578/69468396遇到问题可以看我主页加我Q,很少看博客,对你有帮助别忘记点赞收藏。...原创 2021-12-23 16:44:50 · 4605 阅读 · 0 评论 -
微信小程序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 · 1820 阅读 · 0 评论 -
微信小程序裁剪原始图片尺寸任意比例(有效果图)
效果图下载地址: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 · 1231 阅读 · 1 评论 -
微信小程序裁剪图片大小(有效果图)
效果图.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 · 2693 阅读 · 0 评论 -
微信小程序保存图片到手机相册(封装全局使用)
效果图.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 · 1269 阅读 · 0 评论 -
微信小程序滑动验证拼图(有效果图)
效果图.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 · 2996 阅读 · 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 · 996 阅读 · 0 评论 -
微信小程序弹出层禁止页面滚动
效果图如下是否随页面滚动 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 · 566 阅读 · 0 评论 -
微信小程序页面跳转传参(对象、数组)
跳转事件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 · 1984 阅读 · 0 评论 -
微信小程序带参数返回上级页面
返回上级页面//在需要执行带参数返回上级页面的地方加上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 · 531 阅读 · 0 评论 -
微信小程序动画效果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 · 2795 阅读 · 0 评论 -
微信小程序打卡签到页面(有效果图)
效果图如下所示.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 · 13641 阅读 · 20 评论 -
微信小程序实现转盘抽奖(有效果图)
效果图如下所示.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 · 8539 阅读 · 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><原创 2020-07-21 10:46:04 · 2498 阅读 · 0 评论 -
微信小程序实现点击页面地方出现文字
效果图如下所示.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 · 2628 阅读 · 0 评论 -
微信小程序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 · 500 阅读 · 0 评论 -
微信小程序分享朋友圈(目前只支持安卓)
官方文档如下: 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 · 708 阅读 · 0 评论 -
微信小程序组件库(简洁极客)---附源码
效果图如下所示,正在逐渐完善。目前只完成了弹出层和加载,后续会继续更新,时间是不定时的有时间就会写一点,你需要什么样的功能可以在下方评论反馈 我可以加上去弹出层组件参数加载组件参数链接: https://pan.baidu.com/s/1kh_4jfkXyPc4fN9NACH-cA 提取码: dxe8觉得我写的还不错,对你有帮助可以微信打赏哦。有什么问题欢迎评论留言,我会及时回复你的...原创 2020-07-08 17:09:02 · 1775 阅读 · 2 评论 -
微信小程序翻牌抽奖(带动画)- - -附效果图
效果图如下所示这里做的比较简陋,就花了一点时间实现了翻牌抽奖效果,提供思路.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 · 8509 阅读 · 2 评论 -
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 · 1734 阅读 · 0 评论 -
微信小程序跑马灯(真机效果一致)
效果图如下所示.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 · 962 阅读 · 0 评论 -
微信小程序日历包含(阴历)- - -附效果图
效果图如下所示下载地址:https://download.csdn.net/download/qq_43764578/12414346有需要的小伙伴可以下载有什么问题欢迎评论留言,我会及时回复你的原创 2020-05-13 11:48:12 · 2297 阅读 · 1 评论 -
微信小程序获取阴历
效果图如下所示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 · 1346 阅读 · 3 评论 -
微信小程序获取当前时间以及获取星期几
效果图如下所示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 · 9031 阅读 · 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 · 1597 阅读 · 1 评论 -
微信小程序用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 · 546 阅读 · 0 评论 -
仿京东微信小程序(效果图)
首页分类推荐购物车我的搜索(感觉这个是这里面最复杂的)详情因为不能上传视频,上传图片大小受到限制很多功能细节没有完全展示,想看完整手机版的可以访问QQ:1010753897 空间下载地址:https://download.csdn.net/download/qq_43764578/12314561有什么问题欢迎评论留言,我会及时回复你的...原创 2020-05-10 14:08:11 · 2926 阅读 · 3 评论 -
微信小程序聊天功能(仿微信)- - -附效果图
效果图如下所示语音功能因为是在电脑上所以不能使用,想看完整手机版的视频可以加QQ:1010753897 查看完整视频有什么问题欢迎评论留言,我会及时回复你的原创 2020-05-09 17:27:52 · 4754 阅读 · 9 评论 -
微信小程序录音功能(简易教学)
.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 · 2723 阅读 · 0 评论 -
微信小程序答题功能(二)- - - 按选项答题
效果图如下所示.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 · 8586 阅读 · 9 评论