gitee项目分享:加载动画、卡券半圆、滑动、物流轮播图购物车等 …

gitee项目分享:加载动画、卡券半圆、滑动、物流轮播图购物车等 …

2021-08-30 642
下载不了?请联系网站客服提交链接错误!
增值服务:
gitee项目分享:加载动画、卡券半圆、滑动、物流轮播图购物车等 …
最近更新 2021年08月30日
资源编号 105626

gitee项目分享:加载动画、卡券半圆、滑动、物流轮播图购物车等 …

2021-08-30 小程序教程 0 642 百度已收录
限时活动VIP只需20元
增值服务:
¥ 0 钻石 开通VIP尊享优惠特权
立即下载 升级会员
详情介绍

介绍

微信小程序实现日历,可进行月份切换 微信小程序实现物流页面 自定义轮播图指示点页面 购物车页面+左滑删除 movable-area组件实现滑动删除 卡券实现半圆状态 自定义弹框 禁止底层滑动

软件架构

软件架构说明

安装教程

  1. 微信开发者工具打开(2021.8.15 新增页面导航,首页为所有页面导航)
  2. cal:为日历页面
  3. demo/index:为物流页面,在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容。通常在小程序中,我们需要手工维护骨架屏的代码。 demo/index2:新增伪元素写法。
  4. dots:为自定义轮播图指示点页面
  5. touchRemove: 购物车页面+左滑删除
  6. touchMove2: 滑动删除2 movable-area组件
  7. cardCircle: 卡券实现半圆状态
  8. pop: 自定义弹框 禁止底层滑动(catchtouchmove+scroll-view)
  9. pie: echarts的饼图和折线图(wxcharts.js)
  10. charts/index: echarts官方推荐小程序使用的ec-canvas组件和echarts.js
  11. index: 自定义tabbar组件,cover-view进行覆盖
  12. getStar:星星评分 1-5颗星 分别对应\’极好\’,\’较好\’,\’一般\’,\’较差\’,\’很差\’,点星星字段产生变化 点字段星星变化
  13. sendCode/index: 自定义input输入框的样式 (粘贴的时候无法实现长按粘贴 待完善的bug)
  14. sendCode/index2:自定义弹框验证码组件(v-code)+新增背景图虚化(filter: blur(10rpx);)+新增三角形 箭头 矩形 梯形 圆弧等样式
  15. addImg: 上传多张图片 wx.chooseImage()+预览图片wx.previewImage()+上传文件到服务器 wx.uploadFile()
  16. choseList: 筛选页(1.小程序自带日期选择2.tab切换 3.右边弹框筛选,超出4条数据默认隐藏,可点击展开)
  17. charts/index: 自定义导航 \”navigationStyle\”: \”custom\” 获取胶囊和导航栏等高度,自定义图标等
  18. scroll: scroll-view填充剩余高度 ,滚动条滑动选中相应分类,点击分类实现锚点定位。
  19. index2: 自定义导航栏+swiper+ 新增消息滚动弹框+左滑的tablist
  20. charts/index2: echarts实现饼图,canvas为原生组件,层级很高,用cover-view实现覆盖,可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher。新增修改,头部用cover-view实现fixed的tab栏 。多个cover-view的层级关系,写在页面越后面层级越高!(存在tooltip被底部字体遮挡的bug 待解决)
  21. another/choseGoods:数值计算,引入math.min.js处理精度问题。
  22. choseAddress:地址选择,wx.chooseLocation(需要用户授权)+wx.chooseAddress(无须用户授权,直接调用该接口)
  23. scroll/index3:商品详情页,头部导航栏为自定义的tab(fixed)+双向锚点(scroll-view实现点击tab选中对应的区域,页面滚动头部tab被选中),新增富文本样式修改,正则表达式进行匹配。(情况一:富文本不带style,此时可以正则添加style,class。或者在rich-text或父元素标签来定义样式!情况二:富文本带style,正则添加class才行)
  24. another/mrovevideos:视频页面,自定义播放与暂停的按钮与事件
  25. another/swiper-threeD新增swiper+transform: scale(1)实现3D轮播效果,animation实现动画效果,360度翻转,来回滚动等效果
  26. subPack/animationBox 新增wx.createAnimation+css3:transform的rotate+translate形成一个五福合成的效果。
  27. another/circleRing/index 新增canvas(接口wx.createCanvasContext)绘制圆环的组件,层级很高,cover-view能力有限,采用wx.canvasToTempFilePath转换成图片,展示图片,避免穿透的发生,(该接口已被废弃,canvas2d支持同层渲染)
  28. subPack/canvas2d/index 新增canvas2d 绘制圆环进度条组件,同层渲染,canvas层级不会发生穿透现象(原接口wx.createCanvasContext已被废弃)
  29. another/scroll-x 新增scroll-view+swiper实现左右滚动导航条。
  30. subpack/loading/index 新增17个loading动画,可以根据这些样式进行其他的变化,animation实现。
  31. subpack/loading/indedx2 新增15个炫酷的loading动画。

完整代码

通过自己总结,并向一些优秀的前端开发者学习得来的结果,希望小伙伴们可以关注star一波~(不断更新,大家互相学习哈)

https://gitee.com/susuhhhhhh/wxmini_demo

资源下载此资源仅限注册用户下载,请先

1、本站赞助VIP,仅需【128】元即可 ! ! ! (赞助后永久享受整站资源全部免费下载)
2、站内资源均可通过签到等任务进行免费兑换。(鼓励大家签到)
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站所分享的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分),请熟知后再赞助下载!收取的费用只为能长期与大家分享学习,本站为非商业性网站,纯属个人爱好!

K4资源 小程序教程 gitee项目分享:加载动画、卡券半圆、滑动、物流轮播图购物车等 … https://www.k4sc.com/105626.html

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务