qq_41756580的博客

最近需求要求实现一个用日历显示用户打卡记录的功能，百度google了微信小程序的组件，都没有找到合适的，索性就懒得找了，自己动手，丰衣足食。下面先来看看日历组件的效果吧：设计要求：1、能够折叠日历组件2、能够标记日期3、能够根据左右滑动切换月份，并且刷新数据。设计思路：1、折叠可以通过添加移除class实现动画折叠。2、每个日期都是一个格子，可以放时间，也可以放图标，只需要根据wx:if来控制是否显示图标和样式。3、使用微信的原生组件swiper来实现左右滑动的.

在开发微信小程序的过程中免不了要使用到分享功能，然而现在微信官方还没有开放小程序分享到朋友圈的功能，这时候我们只能使用其他方法分享到朋友圈了。效果图如下：组件文件：js文件：// components/rwj-poster/index.jsComponent({ /** * 组件的属性列表 */ properties: { }, /** ...

在开发微信小程序的过程中，经常会使用到loading动画，微信自带的wx.showLoading()与wx.showToast()在使用上非常的方便，但是这个接口也是一个坑，在安卓真机上运行，经常会出现wx.hideLoading()无效的情况，结果就导致loading动画一直存在，看到微信官方说的是不在onShow和onLoad中调用，还有就是加个延时setTimeout，然而这两个我都试过了，...

1、bug--开启下拉刷新不能自动回弹说明：微信小程序开启下拉刷新后，开发者工具上可以自动回弹，android上不能回弹，基础库2.9.4解决：在onPullDownRefresh监听函数中动态关闭回弹，代码：//index.json"enablePullDownRefresh": true,//index.jsonPullDownRefresh: function(){...

在做小程序开发的时候，客户给出一个底部菜单栏的效果图，要求中间的一个菜单呈圆形突出，也就是下面的效果：小程序的原生的tabbar是不行了，我就自己写了一个tabbar的组件。前言：目前还存在一些问题待完善，例如跳转未加载过的页面时闪烁的问题。配置：首先是开启自定义tabbar设置： app.json->"custom": true，这里为了方便我就直接在app.jso...

如果觉得微信小程序的切换太过生硬，可以看看下面我的方法：wxml：<swiper indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{duration}}" circular="true" current="{{bannerCurrent}}" bindchange="bannerCha...

微信小程序提供了一个很好用的api，IntersectionObserver 对象，监听目标元素与其祖先或视窗交叉状态的手段。其实现原理在于监听目标元素与参照区域相交（参照区域可以为页面显示区域、指定一个元素节点）；这里实现懒加载的原理就是如此，监听需要加载的图片，给图片数组添加一个showState：false的字段，当使用IntersectionObserver 监听到图片进入参照区域...

闲着无聊，写一个标签式的导航栏，没有使用微信小程序的scroll-view，感觉这玩意儿有点诡异，添加了scroll-x=“true”,也加了样式父元素white-space:nowrap;子元素：display:inline-block;这item就是不滑动，雷打不动那种。没办法，只能舍弃掉它了，还好舍弃它也只是不能监听到滚动事件而已，这里也用不上监听滚动。在实现自定义组件的情况下，还去...

在小程序开发的过程中，会遇到一些页面上的要求，要求实现顶部导航栏的渐变如何实现，因为小程序做了一些封装，下面看看页面的布局图：如图所示，实际上我们能够操作的页面只有中间那一块，那么，如果客户需要使用顶部渐变怎么处理呢？先看看效果图：其实，微信小程序还是开放了一些权限，让我们自定义顶部导航栏的，只需要在当前页面的json文件中配置："navigationStyle": "cus...

最近客户要求，在原有的音频功能上改动，使用户能够拖动进度条进行控制音频进度。效果如下：下面是代码：父组件，wxml：<slider-audio audio-src="{{audioUrl}}"></slider-audio>父组件，json："usingComponents": { "slider-audio": "../../com...

刚开始搞小程序，搞了一周后，可以开始写组件了，写个分页组件练练手：父组件，json文件引入："usingComponents": { "paging": "../../components/paging/index" //引入存放你组件的路径 }父组件，wxml文件使用：<paging current-index="{{page}}" total-page="{...