小程序
文章平均质量分 56
小程序好玩又简单
苏苏哇哈哈
宇宙无敌超级美少女程序员| 苏苏的bug
展开
-
微信小程序实现滑动/点击切换Tab
👏 swiper+scroll-view实现滑动/点击切换Tab,以及scroll-left的使用~🥇文末分享源代码。记得点赞+关注+收藏!原创 2022-12-01 00:46:37 · 11259 阅读 · 5 评论 -
微信小程序实现一些优惠券/卡券
前几周有小伙伴问我如何用css实现一些优惠券/卡券,今天就来分享一波吧!速速来Get吧~原创 2022-11-24 01:44:19 · 4553 阅读 · 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 · 1444 阅读 · 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 · 1193 阅读 · 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 · 829 阅读 · 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 · 2687 阅读 · 0 评论 -
支付宝小程序实现swiper指示点自定义
1.实现效果2.关键类名:.a-swiper-indicator.a-swiper-dot.a-swiper-dot-active3.实现代码 <swiper class="swiper_box" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{1000}}" circular="true"> <swiper-item a:for="{{banner}}" a:ke原创 2021-11-02 23:06:59 · 872 阅读 · 0 评论 -
微信小程序实现保存图片(唤起用户授权)
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 · 2308 阅读 · 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 · 2109 阅读 · 5 评论 -
微信小程序轮播图指示点自定义(修改原生指示点样式)
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 · 1759 阅读 · 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 · 1732 阅读 · 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 · 1872 阅读 · 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 · 5160 阅读 · 2 评论 -
支付宝小程序实现自定义头部导航栏
1.实现效果原创 2021-11-03 09:19:40 · 3440 阅读 · 0 评论 -
微信小程序实现打卡(翻转效果)
1.实现效果原创 2021-11-16 23:17:42 · 2933 阅读 · 1 评论 -
微信小程序实现圆形菜单弹出选中动画
微信小程序实现圆形菜单弹出选中动画原创 2022-09-27 01:35:43 · 2421 阅读 · 2 评论 -
微信小程序实现tabbar凹凸圆选中动画
微信小程序实现底部tabbar凹凸圆选中动画原创 2022-09-20 14:22:53 · 2409 阅读 · 7 评论 -
微信小程序实现滚动吸顶
微信小程序实现滚动吸顶原创 2022-08-23 13:14:34 · 3680 阅读 · 0 评论 -
微信小程序实现活动倒计时
微信小程序实现活动倒计时原创 2022-08-04 00:09:37 · 1515 阅读 · 0 评论 -
微信小程序实现tab选中(特殊圆角)样式
1.实现效果2.实现原理前3个常规设置即可,这里说下第四个样式可以看到,这边有个超出的圆角样式。两种思路:将整个父元素设置线性渐变色背景,上下两部分。设置单个元素的伪元素,伪元素部分设置径向渐变思路一:为父元素设置线性渐变背景background: linear-gradient(180deg, #d6001f 50%, #fff 50%);将子元素设置相应的border-radius,不同的背景色,这一步已经可以看到我们想要的特殊圆角了,接着把选中与不选中的颜色,设置与原创 2022-04-09 21:46:58 · 3507 阅读 · 2 评论 -
css实现弹出菜单动画(微信小程序)
1.实现效果2.实现原理定义一个菜单列表,图标,名称,跳转路由menuList: [ { name: '菜单一', src: 'https://i.postimg.cc/Bn1XpkSn/susu.jpg', url: '' }, { name: '菜单二', src: 'https://i.postimg.cc/Gm7KjGmN/111.jpg', url: '' }, {原创 2022-03-24 23:26:52 · 5467 阅读 · 0 评论 -
微信小程序实现拆红包动画
1.实现效果2.实现原理wx.createAnimation(Object object):创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。点击红包,弹出红包弹框,用到过渡动画this.animation.translate('-50%', '-50%').step();关闭弹框this.animation.translate('-50%', '100%').step();原创 2022-03-24 00:05:24 · 2143 阅读 · 0 评论 -
微信小程序实现单选跳跃选择动画
1.实现效果2.实现原理wx.createAnimation(Object object):创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性Animation.translateY(number translation):在 Y 轴平移的距离,单位为 pxwx.createSelectorQuery():获取相应id的高度拿到当前列表数据的高度+当前选中小圆点的高度,计算出tra原创 2022-03-20 20:10:44 · 874 阅读 · 0 评论 -
微信小程序rotateZ实现卡片翻转
1.实现效果2.实现原理css的filte:hue-rotate(deg)给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。css的transform:rotateZ(deg)rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。动态的设置hue-rotate和rotateZ角度,实现页面切换,并改变背景颜色同时设置图片hue-rotate与父原创 2022-03-19 20:17:06 · 3939 阅读 · 1 评论 -
微信小程序scroll-into-view实现页面定位
1.实现效果2.实现原理A页面有list,包含n条数据,跳转到B页面,带参,参数为当前数据的索引(或其他数据,唯一值即可)B页面,同样有n条数据,onload接参数,拿到数据的索引,得到传过来的数据B页面的list,用scroll-view展示,scroll-x,并设置scroll-into-view为toView,值为某子元素id(id不能以数字开头),为每条数据设置id,取值‘view{{index}}’B页面,根据onload拿到的索引,动态的设置toView为view+当原创 2022-03-06 00:08:48 · 2957 阅读 · 0 评论 -
微信小程序scroll-view实现滚动卡片
1.实现效果2.实现原理scroll-view,设置scroll-y,竖向滚动,高度为整个页面的80%;为卡片设置一定高度的margin-top,使卡片的初始高度在页面的底部;在卡片的顶部设置横条,为卡片设置一个id,当点击的时候,动态的设置scrollInToView ,scroll-into-view="{{ scrollInToView }}";3.实现代码<view class="box"> <scroll-view scroll-y="true" scr原创 2022-03-04 23:49:09 · 2686 阅读 · 1 评论 -
微信小程序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 · 4948 阅读 · 0 评论 -
微信小程序实现瀑布流布局(方式一)
微信小程序瀑布流原创 2022-02-28 23:33:13 · 9406 阅读 · 5 评论 -
微信小程序swiper+scroll-view实现滑动切换内容
1.实现效果2.实现原理swiper:滑块视图容器。其中只可放置swiper-item组件,设置不同的swiper-item,通过bindchange事件,动态的改变当前选中项,swiper默认高度为150,必须设置相应高度才可。scroll-view:包裹整个页面,设置scroll-x或scroll-y,改变滚动的方向。3.实现代码<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scr原创 2022-02-27 00:11:56 · 7197 阅读 · 4 评论 -
微信小程序实现抽奖走马灯+圆点闪烁
1.实现效果2.实现原理2.1 圆点交互闪烁2.2 抽奖交互2.3 抽中奖品边框渐变色3.实现代码原创 2022-02-24 22:29:13 · 1620 阅读 · 1 评论 -
微信小程序实现加载进度条
1.实现效果2.实现原理2.1第一个线条加载,设置translate3d属性,动态的改变百分比,实现加载。translate3d() CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达,分别表示他在三个方向上移动的距离。translate3d(tx, ty, tz)tx是一个 代表移动向量的横坐标。ty是一个 代表移动向量的纵坐标。tz是一个 代表移动向量的z坐标。它不能是 值;那样的移动是没有意义的。transform: translate3d(-{{10原创 2022-02-23 23:48:55 · 3857 阅读 · 2 评论 -
微信小程序实现堆叠式轮播
1.实现效果2.实现原理1.css的var()函数var() 函数用于插入自定义属性的值,而不是另一个属性的值的任何部分。语法:var(custom-property-name, value)eg::root { --main-bg-color: coral; --main-txt-color: blue; --main-padding: 15px; }#div1 { background-color: var(--main-bg-color); color:原创 2022-02-20 23:12:16 · 2711 阅读 · 4 评论 -
微信小程序中自定义组件slot的使用
1.slot是什么?组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。在组件模板中可以提供一个 slot 节点,用于承载组件引用时提供的子节点。2.如何使用首先定义一个组件:在wxml中定义组件的内容:<view class="wrapper"> <view>苏苏苏</view> <slot></slot></view>在页面中引入该组件:在模板中引用到的自定义组原创 2022-02-20 00:26:45 · 2352 阅读 · 0 评论 -
微信小程序实现一些炫酷的loading动画
1.实现效果2.实现原理.伪元素.css3动画.transform3.实现代码从上到下,从左到右依次的代码如下<!--pages/subPack/loading/index.wxml--><view class="title">样式一:</view><view class="ring"> <view>sss</view> <view class="line"></view><原创 2022-02-17 23:33:25 · 4115 阅读 · 0 评论 -
微信小程序实现关键词高亮
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 · 2521 阅读 · 2 评论 -
微信小程序(或uniapp)引入腾讯视频插件播放视频
1.申请插件注意:个人开发者无法使用登录微信公众平台,在你的小程序后台的设置-第三方服务—插件管理,搜索插件并点击添加。添加成功之后,点击详情,查看该插件的具体信息。拿到该插件的appid以及版本号。github地址:https://github.com/tvfe/txv-miniprogram-plugin2.使用步骤微信小程序:小程序的app.json里声明使用插件 "plugins": { "tencentvideo": { "version": "2.0原创 2022-01-25 23:49:41 · 12211 阅读 · 2 评论 -
微信小程序实现一键返回顶部
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 · 3720 阅读 · 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 · 3778 阅读 · 3 评论 -
微信小程序实现图片底部带有弧度
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 · 1356 阅读 · 0 评论 -
微信小程序实现横向滚动文字
1.实现效果2.实现思路父元素设置overflow: hidden;子元素添加一个动画,translateX3.实现代码<view class="box flex-row"> <text class="r">纯CSS文字滚动播放</text></view>/* pages/another/scrNews/index.wxss */page { background-color: pink;}.box { width: 70原创 2022-01-15 14:41:00 · 4588 阅读 · 2 评论