微信小程序
文章平均质量分 58
微信小程序实战分享
苏苏哇哈哈
宇宙无敌超级美少女程序员| 苏苏的bug
展开
-
微信小程序实现滑动/点击切换Tab
👏 swiper+scroll-view实现滑动/点击切换Tab,以及scroll-left的使用~🥇文末分享源代码。记得点赞+关注+收藏!原创 2022-12-01 00:46:37 · 11799 阅读 · 5 评论 -
微信小程序实现一些优惠券/卡券
前几周有小伙伴问我如何用css实现一些优惠券/卡券,今天就来分享一波吧!速速来Get吧~原创 2022-11-24 01:44:19 · 5092 阅读 · 1 评论 -
微信小程序movable-area实现左滑删除
1.实现效果2.实现原理微信小程序自带组件movable-view,此节点为movable-area子节点,必须包裹在movable-area中,不设置宽高时候 默认为10rpx。3.完整代码(更多小程序代码请移到gitee查看)https://gitee.com/susuhhhhhh/wxmini_demo4.部分代码<view class="top" wx:for="{{cardList}}"> <movable-area> <movable-原创 2021-06-23 21:58:59 · 1535 阅读 · 0 评论 -
微信小程序上传图片+图片预览
1.实现效果2.实现原理上传图片:wx.chooseImage()预览图片:wx.previewImage()上传文件到服务器 wx.uploadFile()3.完整代码(更多代码移至码云https://gitee.com/susuhhhhhh/wxmini_demo喜欢的关注+star一下~4.部分代码data: { show:true,//显示选择图片的按钮 imgList:[], maxPhoto:10,//最大上传10张图片 }, /** *原创 2021-07-05 20:32:57 · 1311 阅读 · 0 评论 -
微信小程序自定义底部tabbar
1.实现效果2.实现原理自定义tabBar微信开放文档3.实现步骤1.在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。2.在代码根目录下添加入口文件3. 编写 tabBar 代码用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar 接口,可获取当前页面下的自定义 tabBar 组件实例。4.The last but the most important要在这原创 2021-07-06 09:17:41 · 883 阅读 · 0 评论 -
微信小程序实现星星评分
1.实现效果点击星星 =》文字相应选中点击文字=》星星相应的选中1-5个2.实现原理1.默认所有星星的选中值为1,1表示不选中,2表示选中。2.获取当前星星的index值,假设此时选中星星的index=1,表示选中为第二个星星,则对星星列表进行2次循环,设置每一项的选中值为2,当为2显示选中的星星图片,反之未选择的状态。3.获取此时选中值为2的列表长度,此假设情况下为2,为文字设置三元样式判断,若2等于index+1即为选中状态。4.当点击文字的时候,将data-index写成4-index原创 2021-07-01 22:06:36 · 2854 阅读 · 0 评论 -
css实现一个带半圆形状的卡片
1.实现效果2.实现原理半圆+伪元素原创 2021-10-25 09:22:19 · 965 阅读 · 0 评论 -
微信小程序云开发01
1.创建项目直接创建云开发,或者手动初始化云环境以下为直接创建:以下为手动创建:修改project.config配置文件修改app.js// app.jsApp({ onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力'); } else { wx.cloud.init({ // env 参数说明: //原创 2022-01-11 13:17:11 · 524 阅读 · 0 评论 -
微信小程序实现图片底部带有弧度
1.实现效果2.实现思路border-radiusborder-radius: 1-4 length|% / 1-4 length|%;每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。3.实现代码<view class="mb20">方法一:不推荐,图片适配不好,被放的很大</view><view style="overflow: hidden;" cl原创 2022-01-18 00:00:36 · 1442 阅读 · 0 评论 -
微信小程序实现swiper不定长数据滚动
1.实现效果2.实现原理1.纵向滚动2.同时显示的数量,实现不定长注意点:数据少于display-multiple-items设置的数,就会出现不显示数据情况。假设,现在需要同时展示三条数据:list数组长度大于2,display-multiple-items就等于3;如果数组长度不大于2,display-multiple-items就等于数组的长度。d_num:len>2?3:len3.实现代码<!--pages/wxCase/newsSwiper/index.wx原创 2021-11-25 18:02:11 · 1514 阅读 · 5 评论 -
微信小程序实现保存图片(唤起用户授权)
1.实现效果2.实现原理2.1文档地址!!!保存图片,需要用户授权。wx.saveImageToPhotosAlbum({ success(res) { }})注意:保存的图片需要是临时文件路径或本地路径(不支持网络路径)2.2 获取本地路径wx.getImageInfo({ src: 'images/a.jpg',//==>图片的路径,支持网络路径、本地路径、代码包路径 success (res) { console.log(res.path)//====原创 2021-11-07 12:54:57 · 2409 阅读 · 0 评论 -
微信小程序实现历史搜索功能(h5同理)
1.实现效果2.实现原理将数据存在storage中。wx.setStorageSync('search_history', JSON.stringify(this.data.list))取数组前15条。 if (wx.getStorageSync('search_history') ){ this.setData({ list:JSON.parse(wx.getStorageSync('search_history') ).slice(0, 15) })原创 2021-09-23 00:07:58 · 2199 阅读 · 5 评论 -
微信小程序实现一键返回顶部
1.实现效果2.实现原理onPageScroll事件,监听页面滚动事件,当页面滚动超过一定高度,显示出一键返回顶部的按钮。wx.pageScrollTo事件,实现一键返回顶部。将页面滚动到目标位置,支持选择器和滚动距离两种方式定位。3.实现代码// pages/actualPage/oneTop/index.jsPage({ data: { no_scroll: true, }, onLoad: function (options) { }, o原创 2022-01-24 21:33:49 · 3807 阅读 · 3 评论 -
微信小程序轮播图指示点自定义(修改原生指示点样式)
1.实现效果2.实现原理修改swpier原生指示点的样式。.wx-swiper-dots.wx-swiper-dots-horizontal.wx-swiper-dot .wx-swiper-dot::before.wx-swiper-dot-active3.完整代码(更多代码请移至码云)https://gitee.com/susuhhhhhh/wxmini_demo喜欢的就star+关注一下~4.主要代码css样式:/* pages/dots/index2.wxss *//*原创 2021-07-06 13:44:45 · 1842 阅读 · 0 评论 -
微信小程序自定义验证码+密码样式
1.实现效果图(三种样式)2.实现原理定义一个input框用来输入验证码信息,将此input框用绝对定位进行位置偏移隐藏(或设置宽高为0),再用新的view覆盖在这个input框上面,用来显示输入的value。3.完整代码(更多代码请移步码云)https://gitee.com/susuhhhhhh/wxmini_demo喜欢的就关注+start一下~4.有一个bug待完善当复制的时候 第一次从剪切板显示内容可以进行粘贴,当剪切板不出现时候,由于input被隐藏,无法长按粘贴。试着解决原创 2021-07-05 09:43:55 · 1819 阅读 · 0 评论 -
微信小程序canvas2d绘制圆环进度条组件
1.实现效果2.微信小程序canvas官网https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html3.组件介绍Canvas2D接口(type=“2d”),支持同层渲染的一个圆环进度条。(wx.createCanvasContext已废弃)4.部分代码drawCanvasRing() { //canvas 2d const query = wx.createSelectorQuery()原创 2021-08-18 15:07:11 · 1957 阅读 · 0 评论 -
微信小程序地址选择wx.chooseLocation
1.实现效果2.实现原理https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html3.完整代码https://gitee.com/susuhhhhhh/wxmini_demo4.部分代码// pages/choseAddress/index.jsPage({ /** * 页面的初始数据 */ data: { add:true, addressN原创 2021-07-26 17:24:43 · 4793 阅读 · 1 评论 -
微信小程序一定高度文字的展开与收起
1.实现效果2.实现思路1.给文字设置相应的行高,假设想展示10行文字,此时设置一个最大高度是10*文字的行高。2.获取当前文字盒子的整体高度,若大于设置的高度,添加overflow:hidden,height:最大高度;反正不添加样式,不显示箭头。3.显示展开的箭头提示,当点击展开箭头时,切换图片,并不设置最小高度,文字展开。3.实现代码<view class="con"> <view class="tips"> <view class="{{hei原创 2021-11-11 19:39:36 · 2440 阅读 · 0 评论 -
微信小程序实现自定义头部导航栏(详细)
1.实现效果2.实现原理2.1获取胶囊的详细信息let menuButtonObject = wx.getMenuButtonBoundingClientRect();width:胶囊的宽度;height:胶囊的高度top:胶囊距离顶部的距离2.2获取导航栏的整体高度wx.getSystemInfo({ success: res => { let statusBarHeight = res.statusBarHeight,navTop = menuButtonO原创 2021-10-26 23:01:24 · 5298 阅读 · 2 评论 -
微信小程序实现打卡(翻转效果)
1.实现效果原创 2021-11-16 23:17:42 · 3116 阅读 · 1 评论 -
微信小程序实现上下循环滚动的swiper弹幕条
1.实现效果2.实现原理2.1swiper:滑块视图容器。其中只可放置swiper-item组件。vertical 设置为true,滑动方向为纵向。2.2当只有一条数据的时候,手动添加一个新的swiper-item,再一条数据的情况下,依旧循环滚动。3.实现代码<swiper class="new_swiper" vertical="true" autoplay="true" circular="true" interval="2000" duration="1500" display原创 2021-11-17 20:55:37 · 4812 阅读 · 0 评论 -
微信小程序实现文字随机颜色
1.实现效果2.实现思路从颜色列表中随机取一个颜色,赋值给数组的每一项Math.floor(Math.random() * colorArr.length)3.实现代码<view class="box flex-row "> <block wx:for="{{arr}}" wx:key="key" wx:for-index="key"> <view class='box_item' style="background-color:{{item.col原创 2021-12-21 20:48:26 · 3242 阅读 · 0 评论 -
微信小程序原生实现日历功能
1.实现效果图:当前日期底部显示一个点,其他状态可根据自己的需求自定义。2.代码<!-- 日历 --><view class="calendar"> <view class="cale_month flex-row j_b"> <view catchtap="toLastMon"> <image src="/img/de_icon3.png" class="cale_img"></i原创 2021-06-10 10:48:09 · 3883 阅读 · 3 评论 -
微信小程序引入外部icon(阿里巴巴矢量图标)
1.实现效果2.实现步骤阿里巴巴矢量图标库搜索想要的图标,添加购物车。添加进自己的项目中获取代码(注意:当项目更新之后,该代码也需更新)3.实现代码新建一个iconFont.wxss,复制上面所得的代码。/* 当添加新的图标之后,@font-face需要进行更新 */@font-face { font-family: 'iconfont'; /* Project id 2361238 */ src: url('//at.alicdn.com/t/font_2361238原创 2022-01-19 10:54:22 · 3940 阅读 · 3 评论 -
微信小程序实现关键词高亮
1.实现效果2.实现原理1.将搜索的值与列表中的每一项进行对比,如果那一项indexOf(搜索值)!=-1,则表示这项中含有该关键字,处理列表,为这一项设置相应的属性。2.split将字符串和搜索值拆分成数组,循环数组。3.实现代码<view class="head flex-row"> <view class="head_input"> <image src="/img/search_icon.png" class="search_icon">&原创 2022-02-15 00:23:59 · 2652 阅读 · 2 评论 -
微信小程序实现多图片下载
1.实现效果2.实现思路wx.getSetting:获取用户授权。wx.downloadFile:下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求,返回文件的本地临时路径 (本地路径),单次下载允许的最大文件为 200MB。wx.saveImageToPhotosAlbum:保存文件到本地。3.实现步骤1.设置一个can_click参数,防止重复点击。2.对图片数组进行处理,当选中图片之后,设置改项为选中状态,显示选中状态(蒙层+选中),并将选中项push进一个新数组。3.原创 2022-01-06 12:54:55 · 5668 阅读 · 3 评论 -
微信小程序loading加载动画
1.实现效果2.实现原理伪元素animation3.实现代码<view class="box"> <view class="charge"> <view class="wave"></view> </view></view><view class="box"> <view class="loading1"></view></view><vi原创 2022-03-04 00:01:03 · 5156 阅读 · 0 评论 -
微信小程序自定义日期区间选择日历组件
微信小程序自定义日期区间选择日历组件原创 2021-11-22 16:15:44 · 4854 阅读 · 0 评论 -
微信小程序实现圆形菜单弹出选中动画
微信小程序实现圆形菜单弹出选中动画原创 2022-09-27 01:35:43 · 2582 阅读 · 2 评论 -
微信小程序实现tabbar凹凸圆选中动画
微信小程序实现底部tabbar凹凸圆选中动画原创 2022-09-20 14:22:53 · 2642 阅读 · 8 评论 -
微信小程序实现不定长文字步骤条+气泡框
微信小程序实现不定长文字步骤条+气泡框原创 2021-12-16 23:51:57 · 2934 阅读 · 0 评论 -
微信小程序实现滚动吸顶
微信小程序实现滚动吸顶原创 2022-08-23 13:14:34 · 4083 阅读 · 0 评论 -
微信小程序实现课程表
微信小程序实现一个可爱的课程表原创 2022-08-12 00:09:22 · 14470 阅读 · 1 评论 -
微信小程序实现活动倒计时
微信小程序实现活动倒计时原创 2022-08-04 00:09:37 · 1596 阅读 · 0 评论 -
微信小程序实现动态横向步骤条的两种方式
微信小程序实现动态横向步骤条的两种方式原创 2022-07-25 23:41:07 · 3934 阅读 · 2 评论 -
微信小程序实现折线面积图-玫瑰图-立体柱状图
微信小程序实现折线面积图-玫瑰图-立体柱状图原创 2022-07-20 23:54:33 · 1051 阅读 · 1 评论 -
微信小程序引导用户添加小程序动画页
微信小程序引导用户添加小程序动画页原创 2022-06-19 23:26:51 · 2252 阅读 · 3 评论 -
微信小程序展示不定长菜单项轮播滑动
1.实现效果2.实现原理swiper组件:indicator-dots面板指示点,可更改原生组件的样式(若有更复杂样式,可自定义指示点),当只有一页数据的时候不展示该指示点,判断数组长度,动态修改值。autoplay:是否自动轮播。bindanimationfinish:动画结束时会触发 animationfinish 事件,结合e.detail.source,避免抖动效果。current:当前所在滑块的 index。(自定义指示点可用于获取指示点所在位置)数组拆分设置当前轮原创 2022-05-27 00:46:53 · 1350 阅读 · 4 评论 -
微信小程序共享元素+ page-container假页实现弹出效果
1.实现效果2.实现原理page-containerpage-container小程序如果在页面内进行复杂的界面设计(如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等),用户进行返回操作会直接离开当前页面,不符合用户预期,预期应为关闭当前弹出的组件。 为此提供“假页”容器组件,效果类似于 popup 弹出层,页面内存在该容器时,当用户进行返回操作,关闭该容器不关闭页面。返回操作包括三种情形,右滑手势、安卓物理返回键和调用 navigateBack 接口。tip: 当前页面最多只有原创 2022-05-06 22:55:46 · 16614 阅读 · 0 评论 -
微信小程序实现tab选中(特殊圆角)样式
1.实现效果2.实现原理前3个常规设置即可,这里说下第四个样式可以看到,这边有个超出的圆角样式。两种思路:将整个父元素设置线性渐变色背景,上下两部分。设置单个元素的伪元素,伪元素部分设置径向渐变思路一:为父元素设置线性渐变背景background: linear-gradient(180deg, #d6001f 50%, #fff 50%);将子元素设置相应的border-radius,不同的背景色,这一步已经可以看到我们想要的特殊圆角了,接着把选中与不选中的颜色,设置与原创 2022-04-09 21:46:58 · 3798 阅读 · 2 评论