微信小程序自定义组件
刘家军
但求卓越,不谋哗众
展开
-
骨架屏组件
一般情况下,在首屏数据未拿到之前,为了提升用户的体验,会在页面上展示一个loading的图层,但是会有一段时间显示白屏;因此为了更进一步优化用户体验,就有了骨架屏;在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容。具体代码点击查看骨架屏组件代码及实例或者在微信小程序开发工具导入ID ARTPbdmF7zdlI效果图如下:加载中…加...原创 2019-11-28 22:27:43 · 2332 阅读 · 0 评论 -
微信小程序表单验证
由于微信小程序表单组件没有自带的验证功能,因此要针对每一项进行判断比较繁琐 因此封装了一个表单验证js, 具体验证规则根据自己所用到的进行添加,具体案例代码片段点击链接微信小程序表单验证完整代码片段const form = { /* @formData 要验证的表单数据 @rules 验证规则 required必填 ***/ validation(for...原创 2019-11-28 12:45:38 · 1479 阅读 · 0 评论 -
微信小程序自定义导航栏(模板化)
前段时间写过一篇关于微信小程序自定义导航栏的自定义组件,但是对于分享页有一定的bug这次优化了下分享 用模板化又搞了一遍自定义组件 优化了下Android与IOS 显示更接近微信原生的导航栏,以及分享页面显示返回首页按钮如果大家不习惯模板化的话可以 针对自己的需求拿以前封装的组件化做一些修改微信小程序自定义导航栏(组件化)CustomNavBar.wxml<template nam...原创 2019-11-14 14:05:20 · 897 阅读 · 0 评论 -
微信小程序自定义Modal弹出框
效果图支持是否显示moda框标题 支持单个input框(多个的项目没用到懒得写) 支持只显示提示文字代码wxml部分<view class="modal-con" wx:if="{{isShowModal}}"> <view class="modal-mask"> <view class="modal-box" style="wi...原创 2019-04-20 19:32:40 · 9693 阅读 · 2 评论 -
微信小程序自定义头部导航栏 胶囊按钮(组件化)
效果图支持 导航栏自定义背景颜色、背景图片 支持返回文字自定义 支持导航标题自定义首先在app.json window配置项添加 "window": { "navigationStyle": "custom" } 自定义头部导航栏代码wxml部分<view class="cu-custom" style="height:{{CustomBar}}px">...原创 2019-04-20 20:03:42 · 4887 阅读 · 0 评论 -
微信小程序自定义底部导航栏
效果图因为官网 自定义底部导航栏的api需求的基础库版本比较高 以及组建的所以底部导航栏用的模块化封装的wxml部分<template name="Tabbar"> <cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view>...原创 2019-04-20 20:34:04 · 578 阅读 · 0 评论 -
微信小程序自定义卡片布局组件
效果图原创 2019-04-20 20:39:38 · 7567 阅读 · 8 评论