预览

属性

事件

使用

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

⬆ 返回目录

预览

属性

事件

使用

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

⬆ 返回目录

预览

属性

事件

使用

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

⬆ 返回目录

预览

属性

事件

使用

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

⬆ 返回目录

预览

属性

事件

使用

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

⬆ 返回目录

预览

属性

事件

使用

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')
      },
  })

⬆ 返回目录

预览

属性

事件

使用

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

⬆ 返回目录

预览

属性

事件

使用

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

⬆ 返回目录

预览

属性

使用

page.json

{
  "usingComponents": {
    "loading": "plugin://YuanFul/loading"
  }
}

page.wxml

  <loading
      type="default"
  />

⬆ 返回目录

预览

属性

事件

使用

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

⬆ 返回目录