随笔分类 - 小程序
摘要：最近在做个直播间，有个这样的需要，就是进入到页面，<scroll-view>需要滚动到最底部，并且发送消息之后自动的滚动到底部。 开始想着计算里面内容的高度，然后通过设置 scroll-top 的值，达到这个效果。在网上搜一圈，大多也是采取的这种方案。但是感觉这个方案略麻烦。想另寻一条解决方案。 后
阅读全文
摘要：先来个效果图韵下味： 需求： 一开始想着这3个功能应该挺简单的。不就是播放，暂停，前进，后退么~呵~写的时候发现自己还是太年轻。当然，这跟自己的技术功底有关系。现在把我遇到的难点及要注意的点说一下~ 完整代码： wxml: 这里面用到了有赞的小程序组件 icon组件 和 slider 组件。如果你要
阅读全文
摘要：看标题也不知道你有没有明白我想表达的意思，先上个动态图吧~ 需要分析： 1.获取当前日期的前一个月，后一个月和当月。比如说现在是7月5号，我需要得到6月5号至8月5号的日期，同时还要返回当前的星期。 2.滑动到某个月份的区间的时候，左侧也相应的变到当前月份。比如我现在滑动到6月10号了，那么左侧就要
阅读全文
摘要：很久没有更新文章啦~~记录下今天弄的一个小功能。 先上图： 需求很简单： 第1列改变的时候，第2列也随着改变，并且比第1列大1k。 这里用到了微信的picker 组件，对于不太熟练这个组件的小伙伴可以先看下官方文档。 主要用到了多列选择器，如下图： 解决思路： 1.在onLoad里面生成一个二维数组
阅读全文
摘要：根据小程序的设定，swiper组件默认高度为150px，无法根据内容来撑高。如果里面的内容固定还好说，直接设置一个高度就可以了。要是里面内容是动态变化的，这个特性使得我们使用这个组件的时候感到诸多不便。 举个例子： 如下这种情况，如果我们不给它设置一个高度，那么它只会在那个150px局部进行滚动了。
阅读全文
摘要：项目需要做个购物车结算功能，先分析需求： 1.全选，反选的功能。当选中的个数 = 购物车的数量时，勾选全选按钮，反之则取消选中全选按钮； 2.改变选中状态时，计算总价和总数量； 3.单个产品的数量加减； 4.列表某项选中时，如果数量改变，总价和总数量相应改变。 一些说明： 复选框默认用的小程序的ch
阅读全文
摘要：小程序现在支持直接通过npm安装包了，点击这里了解更多。 记录一下我自己的安装步骤及安装过程中遇到的一些问题。希望能够帮助到正在阅读此篇文章的你~ 我就直接通过在项目根目录安装miniprogram-datepicker做演示了。 1.在项目根目录下面新建文件夹：node_modules。 2.终端
阅读全文
摘要：wxParse是一个微信小程序富文本解析组件。现在小程序里面自带了一个<rich-text>组件也能解析富文本，但是表现不尽人意。所以我还是采用的wxParse来解析富文本的。 wxParse git地址：https://github.com/icindy/wxParse。可以先稍作了解。下面具体讲
阅读全文
摘要：关于计算2点之间的距离都依赖了腾讯地图，所以请先在腾讯地图官网申请key。具体流程看下图： 下面具体讲计算2点之间距离的方法。 方法一： 1.通过 wx.getLocation(Object object) 获取用户当前的经度，纬度: 2.通过 腾讯地图 逆解析 你的目的地地址，获取经度，纬度： 3
阅读全文
摘要：字体图标在网页中非常常见了。为了方便在小程序里面重复使用，自定义了一个图标组件，方便控制它的大小，颜色，自定义点击事件。 自定义图标组件的代码如下： 下面的代码是icon文件夹下面的4个文件 index.wxml: <view class="custom-class ss-font ss-icon-
阅读全文
摘要：微信头部导航栏可能通过json配置： 但是有时候我们项目需求可能需要自定义头部导航栏，如下图所示： 现在具体说一下实现步骤及使用方法： 步骤： 1.在 app.json 里面把 "navigationStyle" 设置为 "custom" 这样子之后就只会保留右上角胶囊按钮了。 2.计算相关值 因为
阅读全文
摘要：微信小程序图片预览提供了一个wx.previewImage接口，如下图： 现在我需要对网盘文件里的图片预览，但是网盘从后台返回的数据是各种类型的文件，如下图所示： 那么我们需要解决2个问题： 1.从这些列表中提取出只是图片类型的列表，并将它的url存入数组中； 2.获取当前你点击图片的索引值。 解决
阅读全文
摘要：先来个效果图镇楼： 实现原理： 1.循环需要评分的列表，判断它的分数 与 当前星星索引的大小； 2.点击，获取星星对应的分数，让星星高亮。 代码： star.wxml: 上面的ss-icon 是我自定义的一个组件，点击查看。 主要代码说明： star.js: 注意！！我是把这个评分功能做成的一个组件
阅读全文
摘要：我现在有一个弹层的组件（popup），组件里面定义了显示组件(showPopup)和隐藏组件(hidePopup)的方法。 我们如何在调用组件的页面中调用组件里面的方法呢? 在调用组件的页面写如下代码： 对上面的代码做个简易说明： 先看下效果图： 对应代码截图： 1.调用页面(Page/.../in
阅读全文
摘要：微信开发工具里面，无法展示编译后的一些样式，如::before,::after这些伪类。有时候我们需要修改一些组件的默认样式会略感到麻烦，因为不知道是通过哪里控制的。 我就平常遇到的一些修改默认样式，做一下汇总，不定期更新： 1.button的背景色，边框，圆角： 2.swiper 的点的位置： 不
阅读全文
摘要：动态效果如下： 就是默认只显示4行，点击展开的按钮显示全部，再点击隐藏。 主要通过css来控制 主要的css: 主要的js: Page({ data: { txtHidden: true, }, txtToggle: function() { let that = this; that.setDat
阅读全文
摘要：极点日历github项目地址 添加至自己的小程序方法 极点日历属性接口文档 代码实例： xml: wxss: js: duang~~显示结果如下 ：
阅读全文
摘要：微信小程序里面无法像用jquery一样获取到元素的节点。小程序提供了一个wx.createSelectorQuery()来获取元素的相关信息。官方的文档对于它的用法都已经写的很详细了。 我直接上在项目中使用的代码吧~ 先交待一下我的项目需求，看下图： 获取那块高度的原理很简单，就是页面的整体高度减去
阅读全文
摘要：小程序页面传值的方式： 1.正向传值：上一页面 --> 下一页面 2.反向传值：下一页面 --> 上一页面 先说一下正向传值： 1.url传值： 通过url传值的需要通过option来获取参数值。 更多详情可以访问小程序-navigateTo章节。 A页面： B页面： 2.本地存储： 关于缓存，可以
阅读全文
摘要：项目中做一些列表的时候，可能会需要做到 查看更多 及 收起功能，如下图所示： 大概的需求就是默认只显示2条，点击【查看更多】显示全部，点击【收起】还原。 实现的方法千万种。我来讲一下我的实现思路： 1.先判断列表的长度，如果小于3就不要【查看更多】这个按钮了。 2.根据索引的大小来判断它是默认显示还
阅读全文
