微信小程序秘籍
文章平均质量分 63
微信小程序秘籍
杨晓风-linda
这个作者很懒,什么都没留下…
展开
-
《微信小程序跳转页面安卓闪现两次》
背景为适应需求变化,跳转新的页面,增添逻辑后发现跳转页面闪现两次,核心代码如下:export const onViewGoods = (obj, opts, ckType) => { if (jumpLink === '/xx/xx/xx') { wxRouter.navigateTo({ url: jumpLink, query: { categoryId } }) } wx原创 2022-04-12 20:56:50 · 1853 阅读 · 0 评论 -
《小程序wx:for在更改数据后无法渲染页面》
背景为扩展业务,提高搜索效率,增加tab筛选:[综合,销量,价格]问题发现点击tab,重新发送接口请求,列表数据更改之后,但是页面并没有重新渲染问题分析<block wx:for="{{ searchData }}" wx:key="index"> <card-item messageChannelKey="{{ messageChannelKey }}" messageValPickKey="{{ index }}" cardType="normal"原创 2022-03-23 16:20:55 · 3765 阅读 · 0 评论 -
Intersection Observer
背景网页的开发,经常需要了解某个元素是否进入了“视口”,即用户能不能看到它技术实现方案:监听scroll事件 Intersection Observer API第一种,传统的实现方案计算量很大,容易造成性能问题;第二种名为“交叉观察器”,可以自动“观察元素”是否可见。接下来,将深入看看此APIAPIConstructor IntersectionObserver() 监听目标元素的可见部分穿过一个或多个阈时,会执行指定的回调函数 属性 root 监原创 2022-02-22 15:32:45 · 2809 阅读 · 0 评论 -
《animation、transition之微信小程序》
实现方式1、官网地址:Animation | 微信开放文档创建一个动画实例animation 调用实例的方法来描述动画 最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性2、原生方式:css3 - transition直接使用css样式来实现动画效果示例1、Animation动画API2、css3-transition<view class="g-flex animation-demo-container"><h1原创 2021-10-20 17:46:22 · 1215 阅读 · 1 评论 -
微信小程序-slot插槽
slot是什么slot标签即为一个占位符插槽,当父组件调用子组件时,具体的标签会被传递过来,这些传递过来的标签就会被替换为slot的位置为什么要使用slot组件封装具有扩展性slot的类别单slot 多slotslot的具体用法一、单slot<slot></slot>二、多slot1、启用多插槽2、给插槽起名字// 启用插槽options: { multipleSlots: true}// 给插槽起名字<原创 2021-09-13 20:35:46 · 1418 阅读 · 0 评论 -
《safe-area-inset-bottom之兼容问题》
背景 身为技术开发,每天惊喜不断。收到业务方反馈,定位为商城的小程序在个别机型上出现结算条不显示的情况。这个bug处于收益喉咙的位置,zhuo's原创 2021-06-01 21:53:51 · 4241 阅读 · 0 评论 -
ios底部安全距离
背景: 目前公司开发商城小程序,对于iOS要设置底部安全距离,否则底部会被黑条遮挡技术方案:1、苹果官方推荐:使用env(),constant()来适配,env()和constant(),是IOS11新增特性,Webkit的css函数,用于设定安全区域与边界的距离,有4个预定义变量: safe-area-inset-left:安全区域距离左边边界的距离 safe-area-inset-right:安全区域距离右边边界的距离 safe-area...原创 2021-03-05 23:26:06 · 7078 阅读 · 2 评论 -
《scrollTop VS scrollLeft 之微信小程序》
背景公司使用微信小程序来开发公司的一个产品,有幸参与到其中。在最近的一次迭代中,体验优化有这样一个点,点击类目时,分别实现横向滚动和纵向滚动的中间定位:技术方案横向滚动一、wxml-核心代码 <scroll-view class="{{showFold ? 'subC-top-nav-fold' : 'subC-top-nav'}}" enhanced="{{true}}" bounces="{{true}}" scroll-原创 2021-04-28 21:30:47 · 650 阅读 · 0 评论 -
《选中圆角样式之微信小程序》
背景公司使用微信小程序来开发公司的一个产品,有幸参与到其中。在最近的一次迭代中,体验优化有这样一个点,现在总结下,属于打技术的地基:技术方案方案一:切图可以将整体选中的样式作为背景图存在,不过这需要UI去切图,然后当做背景来设计。本身在做的时候,让UI进行切图,最终实现的效果不是很理想方案二:使用伪类一、wxml - 核心代码<template> <view wx:for="{{categorys}}" wx:key="categoryCityI原创 2021-04-28 21:10:07 · 681 阅读 · 0 评论 -
《移动端H5图片上传》
前言: 故事的开始要从接受的项目中说起,在用户的使用过程中,发现一个问题:使用安卓手机的用户无法再上传图片时进行拍照的选择,并且一次性无法上传多张照片,经过查阅资料发现:H5在实现图片上传是有兼容性问题正文: 首先,在上传图片时不能进行拍照的选择,这个问题很容易解决,在代码中添加:accept=“image/*”,问题就解决了。<input type...原创 2019-10-25 20:34:45 · 381 阅读 · 2 评论 -
《wx.navigateTo不起作用?怎么跳转呢?》
前言: 项目中,根据公司业务的需求,原来的小程序功能有所变动,由原来的静态页面修改为不再是单纯的页面,还需要有相应的业务逻辑处理,此时问题出现了,如果我没有登录小程序,直接请求就会报服务器内部错误,继而应该去判断是否登录,然后跳转到授权登录页面,登录后再允许用户深入访问,此问题在于怎么判断后自动跳转到中间的tab页呢?其实很简单正文: 最一开始采用的方案是:...原创 2019-10-25 20:16:21 · 708 阅读 · 0 评论