- 插件目录如果标注了
预览版
字样,则表示此版本的插件正在审核 - 如果您有什么问题,欢迎提到 issues,或者通过以下方式咨询反馈
- 如果您喜欢我们的插件,请点击右上角“star” 😉
- 请参考使用案例源码 yuanful-ui-demo
- 邮箱:[email protected]
- QQ:278826466
- 网站:元符科技
在app.json
中配置插件的引入
{
"pages": [
"pages/index/index"
],
"plugins": {
"YuanFul": {
"version": "1.0.3",
"provider": "wx2ca7a9c0f8d4e2b9"
}
}
}
- city-index-list 城市选择列表
- searchbar 搜索栏
- calendar 日历选择
- float-button 浮动按钮
- popover 弹出菜单
- noticebar 通告栏
- ico 图标
- tabs 标签页
- loading 加载
- accordion 手风琴
blue
#03A9F4
orange
#F19149
red
#F44336
green
#009688
deep-red
#BC2221
deep-blue
#2D527C
sea-blue
#005EB8
black
#101820
gray
#53565A
cyan
#23B3D2
purple
#464E7E
city-index-list 城市选择列表 >= v1.0.1
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
theme | String | blue |
插件主题,参考上面插件主题颜色值 |
styles | Object | {} |
插件自定义样式,支持:letterBarBackground 字母索引背景色letterColor 字母默认颜色letterActiveColor 字母选中的颜色closerBackground 关闭按钮背景 |
visible | Boolean | false |
是否显示 |
名称 | 参数 | 描述 |
---|---|---|
select | event |
选择城市的回调,event.detail 为选择的城市数据,包括:name 城市名、code 城市编码 |
page.json
{
"usingComponents": {
"city-index-list": "plugin://YuanFul/city-index-list"
}
}
page.wxml
<city-index-list
theme="orange"
visible="{{cityVisible}}"
styles="{{cityStyles}}"
bind:select="onSelectCity"
/>
<button bind:tap="onClickBtn">显示</button>
page.js
Page({
data: {
cityVisible: false,
cityStyles: {
letterColor: '#fff'
}
},
onClickBtn(){
this.setData({
cityVisible: true
});
},
onSelectCity(e){
let detail = e.detail;
console.log(detail);
}
});
searchbar 搜索栏 >= v1.0.1
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
theme | String | blue |
插件主题,参考上面插件主题颜色值 |
visible | Boolean | false |
是否显示 |
static | Boolean | false |
是否静态展示 |
placeholder | String | 请输入关键字 |
输入框默认占位文字 |
search-value | String | '' | 输入框默认值,默认为空 |
clear-confirm | Boolean | true |
点击清空是否弹出二次确认框 |
confirm-config | Object | { content: '确定要清空吗?' } |
清空时二次确认弹窗配置,与wx.showModal 参数一致 |
icon | String | search |
参考组件ico |
styles | Object | {} |
插件自定义样式,支持:searchIconColor 搜索图标颜色(默认#ddd )clearIconColor 清除图标颜色(默认#ddd ) |
名称 | 参数 | 描述 |
---|---|---|
search | event |
搜索的回调,event.detail.text 为搜索的文字 |
clear | event |
清空历史的回调 |
page.json
{
"usingComponents": {
"searchbar": "plugin://YuanFul/searchbar"
}
}
page.wxml
<searchbar
visible="{{searchbarVisible}}"
search-value="测试"
confirm-config="{{confirmConfig}}"
clear-confirm="{{true}}"
bind:search="onSearch"
/>
<button bind:tap="onClickBtn">显示</button>
page.js
Page({
data: {
confirmConfig: {
content: '确定要清空内容吗?'
}
},
onClickBtn() {
this.setData({
searchbarVisible: true
});
},
onSearch(e) {
let detail = e.detail;
console.log(detail);
}
});
calendar 日历选择 >= v1.0.2
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
theme | String | blue |
插件主题,参考上面插件主题颜色值 |
visible | Boolean | false |
是否显示 |
start-date | String | '' | 开始日期,必填 |
end-date | String | '' | 结束日期,必填 |
名称 | 参数 | 描述 |
---|---|---|
change | event |
选中日期的回调,event.detail.currentDate 为选中的日期 |
page.json
{
"usingComponents": {
"calendar": "plugin://YuanFul/calendar"
}
}
page.wxml
<calendar
visible="{{calendarVisible}}"
start-date="2017-07-07"
end-date="2018-08-08"
bind:change="onChangeDate"
/>
<button bind:tap="onClickBtn">显示</button>
page.js
Page({
data: {
calendarVisible: false
},
onLoad() {
},
onClickBtn() {
this.setData({
calendarVisible: true
});
},
onChangeDate(e) {
let detail = e.detail;
console.log(detail);
}
});
float-button 浮动按钮 >= v1.0.2
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
theme | String | blue |
插件主题,参考上面插件主题颜色值 |
visible | Boolean | true |
是否显示,默认显示 |
src | String | [如图-左] |
默认图片 |
active-src | String | [如图-右] |
点击之后的图片 |
名称 | 参数 | 描述 |
---|---|---|
tapfloat | event |
选中日期的回调,event.detail.open 开关状态 |
page.json
{
"usingComponents": {
"float-button": "plugin://YuanFul/float-button"
}
}
page.wxml
<float-button
bind:tapfloat="onTapBtn"
/>
page.js
Page({
data: {
},
onTapBtn(e) {
let detail = e.detail;
console.log(detail);
}
})
popover 弹出菜单 >= v1.0.2
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
visible | Boolean | false |
是否显示 |
list | Array | [] |
菜单配置 |
elem-rect | Object | {} |
元素的坐标信息 |
page-rect | Object | {} |
页面的坐标信息 |
dir | String | auto |
箭头方位,默认自动计算 如果传入的方位不支持,那么使用默认第一个支持的 可选值 tl tc tr rt rc rb bl bc br lt lc lb 分别代表上右下左中,组合而成的12个方位: tl 对应 top-left tc 对应 top-center tr 对应 top-right rt 对应 right-top rc 对应 right-center rb 对应 right-bottom bl 对应 bottom-left bc 对应 bottom-center br 对应 bottom-right lt 对应 left-top lc 对应 left-center lb 对应 left-bottom |
名称 | 参数 | 描述 |
---|---|---|
select | event |
选中菜单的回调,event.detail.item 当前选中的菜单项 |
page.json
{
"usingComponents": {
"popover": "plugin://YuanFul/popover"
}
}
page.wxml
<popover
dir="tc"
list="{{list}}"
elem-rect="{{elemRect}}"
page-rect="{{pageRect}}"
visible="{{visible}}"
bind:select="onSelectPopover"
/>
<view class=".page">
<button id="menuBtn" size="mini" bind:tap="onClickBtn">显示</button>
</view>
page.js
注意: 每个页面必须调用下面的initPopover
方法。elemSelector
就是按钮的选择器,pageSelector
就是页面最外层的选择器。并设置组件的属性elem-rect
、page-rect
Page({
data: {
visible: false,
list: ['选项1', '选项2', '选项3']
},
onReady(){
this.initPopover();
},
// 每个页面必须
initPopover() {
let elemSelector = '#menuBtn';
let pageSelector = '.page';
wx.createSelectorQuery()
.select(elemSelector)
.boundingClientRect((res) => {
this.setData({
elemRect: res
});
}).exec();
let getRect = (callback) => {
wx.createSelectorQuery()
.select(pageSelector)
.boundingClientRect((rect) => {
if (rect) {
callback(rect);
} else {
setTimeout(() => getRect(callback), 100);
}
}).exec();
}
getRect((res) => {
this.setData({
pageRect: res
});
});
},
onSelectPopover(event) {
console.log(event.detail.item);
},
onClickBtn() {
this.setData({
visible: true
});
},
})
noticebar 通告栏 >= v1.0.2
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
theme | String | blue |
插件主题,参考上面插件主题颜色值 |
visible | Boolean | false |
是否显示 |
content | String | '' | 文案内容 |
animation | Boolean | true |
是否滚动 |
show-closer | Boolean | true |
是否显示关闭按钮 |
font-size | String | 30rpx |
文字大小 |
duration | String | 5s |
动画时长,与CSS3的animation-duration 相同 |
icon | String | tixing |
参考组件ico |
styles | Object | {} |
插件自定义样式,支持:backgroundColor 通告栏背景色contentColor 内容文字颜色closerColor 关闭按钮颜色iconColor 图标颜色 |
名称 | 参数 | 描述 |
---|---|---|
tapbar | event |
点击的回调 |
close | event |
关闭的回调 |
page.json
{
"usingComponents": {
"noticebar": "plugin://YuanFul/noticebar"
}
}
page.wxml
<noticebar
content="{{content}}"
show-closer="{{showCloser}}"
styles="{{styles}}"
bind:tapbar="onTapBar"
/>
page.js
Page({
data: {
showCloser: true,
content: '这是一个跑马灯效果,一直移动哦,哈哈哈,移动移动慢慢移动。',
styles: {
// backgroundColor: '#eee',
// closerColor: 'red',
// contentColor: 'red',
}
},
onTapBar() {
console.log('tap')
},
})
ico 图标 >= v1.0.3
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
theme | String | blue |
插件主题,参考上面插件主题颜色值 |
icon | String | '' | 图标类型,参考上图种类 |
size | String | 40rpx |
图标大小 |
color | String | '' | 图标颜色,默认theme主题色 |
名称 | 参数 | 描述 |
---|---|---|
tapico | event |
点击图标的事件,event.detail.icon 为点击图标的类型 |
page.json
{
"usingComponents": {
"ico": "plugin://YuanFul/ico"
}
}
page.wxml
<ico
theme="deep-blue"
icon="shouye"
size="50rpx"
bind:tapico="tapico"
/>
page.js
Page({
tapico(event){
console.log(event.detail)
}
})
tabs 标签页 >= v1.0.3
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
theme | String | blue |
插件主题,参考上面插件主题颜色值 |
themetype | String | border |
风格,支持border 、background 两种类型(如图) |
slotname | String | tabs |
内容slot 的名称前缀 |
option | Array | [] |
标题配置 |
active-index | Number | 0 |
默认激活位置 |
styles | Object | {} |
插件自定义样式,支持:color 文字颜色fontSize 文字大小backgroundColor 背景色border 边框 |
vertical | Boolean | false |
是否垂直显示(图右) |
vertical-static | Boolean | false |
是否展示全部内容 当为垂直显示时生效( vertical=true ),会有滚动选中效果(参考demo) |
scroll-top | Boolean | 0 |
页面滚动的位置scrollTop 当为垂直显示并且展示全部内容时生效( vertical=true , vertical-static=true ),在页面onPageScroll 事件设置(参考demo) |
名称 | 参数 | 描述 |
---|---|---|
change | event |
切换标签的事件,event.detail.activeIndex 为选择的索引event.detail.scrollTop 设置内容页滚动的高度(垂直显示且展示全部内容时生效,参考demo) |
page.json
{
"usingComponents": {
"tabs": "plugin://YuanFul/tabs"
}
}
page.wxml
<tabs
option="{{ option }}"
bind:change="onTabChange"
active-index="activeIndex"
>
<view slot="tabs0">内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</view>
<view slot="tabs1">内容2内容2内容2内容2内容2</view>
<view slot="tabs2">内容3</view>
</tabs>
page.js
Page({
data: {
option: ['选项1', '选项2', '选项3'],
},
onTabChange(event) {
console.log(event.detail)
}
})
loading 加载 >= v1.0.3
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
theme | String | blue |
插件主题,参考上面插件主题颜色值 |
visible | Boolean | true |
是否显示 |
type | String | default |
加载动画类型,支持:default 、cube 、pulse 、knock 、fade-circle 、rotate |
modal | Boolean | false |
是否是模态 |
page.json
{
"usingComponents": {
"loading": "plugin://YuanFul/loading"
}
}
page.wxml
<loading
type="default"
/>
accordion 手风琴 >= v1.0.3
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
theme | String | blue |
插件主题,参考上面插件主题颜色值 |
slotname | String | accordion |
内容slot 的名称前缀 |
option | Array | [] |
标题配置 |
active-index | Number | -1 |
默认展开的索引(-1表示默认不展开) |
styles | Object | {} |
插件自定义样式,支持:color 文字颜色fontSize 文字大小backgroundColor 背景色padding 标题内填充 |
名称 | 参数 | 描述 |
---|---|---|
change | event |
展开的事件,event.detail.activeIndex 为展开的索引 |
page.json
{
"usingComponents": {
"accordion": "plugin://YuanFul/accordion"
}
}
page.wxml
<accordion
theme="deep-blue"
option="{{option}}"
bind:change="onChange"
>
<view slot="accordion0">内容1</view>
<view slot="accordion1">内容2</view>
<view slot="accordion2">内容3</view>
</accordion>
page.js
Page({
data: {
option: [
'标题1',
'标题22',
'标题333',
]
},
onChange(e) {
let detail = e.detail;
console.log(detail);
}
});