![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
文章平均质量分 61
RosaChampagne
这个作者很懒,什么都没留下…
展开
-
CSS 仿 -webkit-box-reflect 属性实现 图片 镜面 倒影 效果
最近在支付宝小程序上面要实现图片的镜面倒影效果,于是乎,马上找到了-webkit-box-reflect,用上之后真的绝绝子,模拟器上也很完美,可是到真机上一看,iOS 不支持,只有安卓手机支持,这下只能另辟蹊径了,自己画一个呗。原创 2023-06-27 09:15:42 · 737 阅读 · 0 评论 -
支付宝 小程序 抽奖组件 大转盘
使用支付宝原有的大转盘营销组件进行改造的,由于背景使用的图片,目前只支持 6 个奖品,一般情况下的大转盘都是这个规格。转盘停止:之前使用的是计算角度来完成的,没有那种缓慢停止的动画。现在加了一个缓慢停止的动画,让抽奖变得更加顺滑。原创 2023-05-30 16:06:11 · 895 阅读 · 2 评论 -
微信网页 H5 跳转到 微信小程序 Vue wx-open-launch-weapp 图片 样式问题
前段时间,有需求:H5跳转到微信小程序页面,于是查了微信官方文档 <wx-open-launch-weapp>只需要微信小程序的originalId和某个页面的路径即可最难受的是:样式问题需求:点击上面的卡片,进入微信小程序<template> <wx-open-launch-weapp :username="originalId" :path="pages/home/index.html" > <script type="原创 2021-08-10 16:07:27 · 1425 阅读 · 3 评论 -
H5 微信小程序 价格保留两位小数 分为整数部分和小数部分
在项目中经常遇到将价格分为整数和小数部分,字体大小不一样显示。const actualNumber = item.actualAmount.toFixed(2);const priceArray = actualNumber.split('.');item.actualAmountText = priceArray[0];item.amountDecimalText = `.${priceArray[1]}`;...原创 2021-01-05 08:55:28 · 520 阅读 · 1 评论 -
微信小程序 API 封装 工具类
项目结构:http.jsimport { config } from '../config/config'import { message } from '../common/message'import { storageKeys } from '../common/constant'import { promisify } from '../utils/util'const request = async (url, data = {}, method) => { if (u原创 2020-12-09 10:47:28 · 354 阅读 · 0 评论 -
微信小程序 Canvas画图
代码:generateCertification () { wx.showLoading({ title: '正在生成证书', mask: true }) this.createCertification(); setTimeout(() => { // 将生成的canvas图片,转为真实图片 const query = wx.createSelectorQuery(); query.select('#myCanvas') .fi.原创 2020-12-07 17:28:44 · 537 阅读 · 0 评论 -
微信小程序 路由跳转 MiniProgramError {“errMsg“:“navigateTo:fail webview count limit exceed“} Object
微信小程序 跳转页面 页面栈层数限制,如果继续使用navigateTo会报错,所以统一处理,报错了就用redirectTo/** * 跳转到下一页面 * 1.支持只跳页面,不带参数 * eg: jump('/pages/index/select-address/select-address') * 2.支持跳页面, 页面url 后面以"?"的方式带参数: * eg: jump('/pages/index/select-address/select-address?isEnd=true&a原创 2020-12-01 09:50:23 · 2827 阅读 · 0 评论 -
微信小程序 搜索 关键字 高亮显示
效果图:将搜索结果挨个格式化为数组,然后在渲染的时候判断type是否等于1,如果等于1,那就高亮显示。主要代码:<view class="address-title"> <text wx:for="{{item.titleArr}}" wx:key="*this" class="{{item.type === 1 ? 'highlight' : '' }}">{{item.text}}</text></view>/** * * @pa原创 2020-11-19 10:31:48 · 1363 阅读 · 3 评论 -
微信小程序 腾讯地图 格式化 路线
效果图: qqmapsdk = new QQMapWX({ key: 'xxxxx' }); qqmapsdk.direction({ mode: 'driving', from: { latitude: '30.951471', longitude: '121.481774' }, to: { latitude: '30.952991', longitu原创 2020-11-16 17:53:08 · 346 阅读 · 1 评论 -
微信小程序 自定义导航栏
效果图:导航栏高度计算:导航栏高度 = (胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度状态栏到胶囊的间距:胶囊距上距离-状态栏高度计算导航栏高度//app.jsApp({ onLaunch () { // 获取系统信息 const { statusBarHeight, platform } = wx.getSystemInfoSync(); // 胶囊按钮位置信息 const { top, height } = wx.getMenuButt原创 2020-11-12 15:32:18 · 232 阅读 · 0 评论 -
uniapp 微信小程序 空格不显示问题
在css样式中添加这个代码即可white-space: pre-wrap;pre-wrap表示保留空白符序列,但是正常地进行换行。原创 2020-08-27 09:33:03 · 1664 阅读 · 0 评论 -
uniapp 微信小程序 Vue H5 跳转页面 定位 滑动到指定位置
微信小程序需要看到滑动效果:scroll-into-view:值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素<scroll-view v-if="showPage" scroll-y :scroll-into-view="scrollViewId" class="member-container">...... <div id="freight-coupon-box"> </div> <div id="me原创 2020-08-20 13:41:12 · 1561 阅读 · 0 评论 -
微信小程序 uniapp 轮播图 swiper 自定义指示点 dot样式
效果图:html代码:<swiper class="img-swipe" :autoplay="true" :circular="true" :indicator-dots="false" :interval="3000" :current="swiperCurrent" @change="swiperChange"> <swiper-item v-for="(ad, index) in couponAds" :key="index"> <img原创 2020-07-29 16:45:53 · 3862 阅读 · 0 评论 -
微信小程序 uniapp 左滑 删除 带删除icon
效果图:代码结构如下:代码:uni-swipe-action.vue<template> <view> <slot></slot> </view></template><script> /** * SwipeAction 滑动操作 * @descr...原创 2020-03-03 23:18:23 · 3104 阅读 · 1 评论 -
前端 调 后端 分页 删除 问题
删除前端列表的某一条数据,这时候数据删除了如果不重置所有数据,那下一次加载就会少加载一条数据比如一次加载1 2 3 4 5,你把3删了,那后端会认为第二页是7 8 9 10 11,6就会少加载(因为第一页就是1 2 4 5 6),怎么办呢?删除一条数据之后,继续调用拿取列表的分页API,然后只拿最后一条数据追加到正在渲染的数组里面即可。getCollectionLists (aft...原创 2020-03-02 11:08:00 · 950 阅读 · 0 评论 -
微信小程序 自定义 弹框组件
效果图:<!--components/popup/popup.wxml--><view class="popup" hidden="{{flag}}"> <view class='popup-container'> <view wx:if="{{title}}" class="popup-title">{{title}}&l...原创 2020-01-20 19:20:25 · 1252 阅读 · 0 评论