用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2021-8-30 00:28

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

介绍

微信小程序实现日历,可进行月份切换 微信小程序实现物流页面 自定义轮播图指示点页面 购物车页面+左滑删除 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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: susuhhhhhh 来自: gitee