如上图,小程序api中的switch组件只能自定义颜色,不能自定义宽高,所以就开始了自己写switch组件. 自定义组件样式 switch组件样式大致如图,样式思路:未选中时为一个长方形有圆角按钮,和一个半径为长方形[(长方形高度/2)-1]的圆圈,当状态为选中时,圆圈向右滚动,滚动距离为[长方形宽度-长方形高度-1],动画效果通过过渡属性来赋予的,控制圆圈的left值. 自定义组件构思 从父组件传来值有:高度height,宽度width,选中时背景bgColor,未选中背景unBgColor,…

小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 audio 组件,即使官方推荐更强大的  wx.createInnerAudioContext 但是不符合需求,所以这里用到的是 backgroundAudioManager() https://developers.weixin.qq.com/miniprogram/dev/api/getBackg…

小程序的switch开关组件,总结下大概有三种使用场景. 其一: 纯展示场景, 用来展示某个开关值是打开还是关闭的,这个场景比较简单,给个disabled属性就ok了: 其二: 用户点击后立即切换开关值. 以上两种场景都是比较常规的使用场景,下面说下第三种场景 当用户点击后不能立即切换开关状态,需要先执行一些检查,最后判断是否需要切换开关状态. 此种场景下不能简单的使用switch组件,实现思路如下: 将switch组件包裹到view组件内部: switch组件设置为disabled, 不监听c…

nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字段值.页面栈数量,展示“返回”图标: 根据配置字段值.页面栈数量,展示“首页”图标,同时配置“首页路径”: 设置组件插槽,允许开发者在组件上添加任意元素: github下载地址(麻烦git给我比个…

字体图标在网页中非常常见了.为了方便在小程序里面重复使用,自定义了一个图标组件,方便控制它的大小,颜色,自定义点击事件. 自定义图标组件的代码如下: 下面的代码是icon文件夹下面的4个文件 index.wxml: <view class="custom-class ss-font ss-icon-{{ name }}" style="{{ color ? 'color: ' + color : '' }}; {{ size ? 'font-size: ' + size…

官网API:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html 自定义组件的原因,可以重复使用,只有数据不同且模板一样,节约开发成本. wxml <!--logs.wxml--> <swiper-banner Height="400rpx" Width="100%" imgList="{{banners}}&q…

点击下载:switch示例 ,适用于表单,官方switch 说明 .…

2019-01-06:简化了一些代码,以及增加了可用性. // 弹窗配置 dialogConfig: { // 弹窗 dialogvisible: false, options: { // 显示关闭按钮 showclose: true, // 显示底部 showfooter: false, // 是否点击modal关闭 closeonclickmodal: true, // 是否全屏 fullscreen: false }, frames: { // 标题 title: '留言', // 标题位…

百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在页中展示,不能自定义位置.字体大小.在单个文本中增加icon等需求:因此自定义一个全局可通用的Toast. 效果预览 如何使用 代码目录位于 /widget/toast 下,包含3个文件 toast.js 脚本代码 toast.css 样式文件,可以根据自己需求定制 toast.swan 模板结构,…

百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也不能满足一些复杂展示场景,所以就自己动手封装了个智能小程序弹窗wcPop自定义模板插件. 百度智能小程序wcPop支持多种动画展示形式,超精简调用api,可自定义多按钮事件,随意自定义弹窗模板内容. 智能小程序弹窗demo展示: 插件调用api超简洁,易于上手,只需在需要调用的页面引入tpl.js即…