yuanful-ui

当前版本：1.0.3，持续更新中

这是一套可添加到小程序内直接使用的功能插件，无需重复开发，为用户提供更丰富的服务。

无需确认，申请后即可添加插件，免费使用。

备注

插件目录如果标注了预览版字样，则表示此版本的插件正在审核
如果您有什么问题，欢迎提到 issues，或者通过以下方式咨询反馈
如果您喜欢我们的插件，请点击右上角“star” 😉
请参考使用案例源码 yuanful-ui-demo

联系方式

邮箱：[email protected]
QQ：278826466
网站：元符科技

插件预览

插件安装

1. 添加插件

2. 配置插件

在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);
      }
  });

⬆ 返回目录

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

yuanful / yuanful-ui

Labels

Projects that are alternatives of or similar to yuanful-ui

yuanful-ui

备注

联系方式

插件预览

插件安装

1. 添加插件

2. 配置插件

插件目录

插件说明

插件主题颜色值

预览

属性

事件

使用

预览

属性

事件

使用

预览

属性

事件

使用

预览

属性

事件

使用

预览

属性

事件

使用

预览

属性

事件

使用

预览

属性

事件

使用

预览

属性

事件

使用

预览

属性

使用

预览

属性

事件

使用