yeo-ui v1.0.1

Yeo小程序组件使用文档

Yeo组件使用步骤

1. 导入Yeo文件夹（将文件放置同page同层级）
2. 在app.json中导入组件路径

app.json

  "usingComponents": {
    "yeo-search": "/Yeo/YeoSearch/YeoSearch",
    "yeo-anima-search": "/Yeo/YeoAnimaSearch/YeoAnimaSearch",
    "yeo-rotate": "/Yeo/YeoRotate/YeoRotate",
    "yeo-art-font": "/Yeo/YeoArtFont/YeoArtFont",
    "yeo-simple-card": "/Yeo/YeoSimpleCard/YeoSimpleCard",
    "yeo-hang-swing": "/Yeo/YeoHangSwing/YeoHangSwing",
    "yeo-tab-bar": "/Yeo/YeoTabBar/YeoTabBar",
    "yeo-tab-bar-item": "/Yeo/YeoTabBarItem/YeoTabBarItem",
    "yeo-dy-fun-bar": "/Yeo/YeoDyFunBar/YeoDyFunBar",
    "yeo-icon": "/Yeo/YeoIcon/YeoIcon",
    "yeo-card": "/Yeo/YeoCard/YeoCard",
    "yeo-category": "/Yeo/YeoCategory/YeoCategory",
    "yeo-categories": "/Yeo/YeoCategories/YeoCategories",
    "yeo-horizon-slider": "/Yeo/YeoHorizonSlider/YeoHorizonSlider",
    "yeo-horizon-slider-v2": "/Yeo/YeoHorizonSliderV2/YeoHorizonSliderV2",
    "yeo-label-box": "/Yeo/YeoLabelBox/YeoLabelBox",
    "yeo-stretch": "/Yeo/YeoStretch/YeoStretch",
    "yeo-tools-bar": "/Yeo/YeoToolsBar/YeoToolsBar",
    "yeo-blur-card": "/Yeo/YeoBlurCard/YeoBlurCard",
    "yeo-comment": "/Yeo/YeoComment/YeoComment",
    "yeo-message-card": "/Yeo/YeoMessageCard/YeoMessageCard",
    "yeo-loading": "/Yeo/YeoLoading/YeoLoading",
    "yeo-swiper": "/Yeo/YeoSwiper/YeoSwiper",
    "yeo-label-bar": "/Yeo/YeoLabelBar/YeoLabelBar",
    "yeo-tab-change": "/Yeo/YeoTabChange/YeoTabChange",
    "yeo-flow-waterfall": "/Yeo/YeoFlowWaterfall/YeoFlowWaterfall",
    "yeo-diary-box": "/Yeo/YeoDiaryBox/YeoDiaryBox",
    "yeo-text-box": "/Yeo/YeoTextBox/YeoTextBox",
    "yeo-flow-waterfall-box": "/Yeo/YeoFlowWaterfallBox/YeoFlowWaterfallBox",
    "yeo-stamp-text": "/Yeo/YeoStampText/YeoStampText"
  }

在app.json中加入要使用组件的声明路径即可

3. 在页面中引用组件名称标签，配置对应属性与事件

yeo-categories与yeo-category（分类）

展示效果

描述

通过Vue构建组件的形式，将整个组件拆分为了两个块（YeoCategories组件与YeoCategory组件），用户可以根据自身需求，自定义传入分类样式中item个数与item的样子。

属性说明

• ==YeoCategories组件==

• ==YeoCategory组件==

插槽

• ==YeoCategories组件==

YeoCategories组件：内部只含有一个slot标签，供大家任意插入其他样式（当然你也不一定非要插入YeoCategory组件）

• ==YeoCategory组件==

  <yeo-category picUrl='../../images/vuejs-line.png' bgColor='#F8A9FF'>
    <view slot='title'>Vue</view>
  </yeo-category>

使用示例

index.wxml

<yeo-categories>
  <yeo-category picUrl='../../images/html.png'>
    <view slot='title'>HTML</view>
  </yeo-category>
  <yeo-category picUrl='../../images/css3.png' bgColor='#7CE8C1'>
    <view slot='title'>CSS</view>
  </yeo-category>
  <yeo-category picUrl='../../images/js.png' bgColor='#FD7C5A'>
    <view slot='title'>JavaScript</view>
  </yeo-category>
  <yeo-category picUrl='../../images/vuejs-line.png' bgColor='#F8A9FF'>
    <view slot='title'>Vue</view>
  </yeo-category>
</yeo-categories>

yeo-art-font（艺术字体）

展示效果

描述

提供多种形式的字体供大家使用，根据自我喜好，调整字体大小、颜色、位置等。

属性说明

公共属性

上下字体独有参数

重叠字体独有参数

字线字体独有参数

使用示例

index.wxml

<!-- 
  公共参数：
    fonType: 字体类型
    FonSize: 字体大小
    abCol: 上层字体颜色（默认值：#000000） 
    blCol: 下层字体颜色（默认值：#A5ADB5）   
-->

<!-- 
  上下结构字体

  独有参数：
    udFonConUp：上面内容
    udFonConDown：下面内容
    udPosp：位置（可选值：center<居中>、unset<未设置，默认值>）
-->
<yeo-art-font
fonType='udFon'
fonSize='80'
udPosp='unset'></yeo-art-font>

<!-- 
  重叠结构字体

  独有参数：
    olFonCon：内容
    olFromLeft：
      距离屏幕左边的百分比距离(默认值：40) <0~70最佳>
-->
<yeo-art-font
fonType='olFon'
olFromLeft='30'></yeo-art-font>

<!-- 
  字线结构的字体

  独有参数：
    worLineFonCon：内容
    worLinePosp：
      位置（可选值：center<居中，默认值>、unset<未设置>）
    更多参数，请查看文档！
-->
<yeo-art-font
fonType='worLineFon'
fonSize='40'
lineWidthOfScreen='32%'></yeo-art-font>

yeo-icon（图标）

展示效果

描述

Yeo图标，说实话，这组件我感觉封装了个寂寞，但是有总比没有好，后续会持续优化，各位见谅。

属性说明

使用示例

index.wxml

<yeo-icon></yeo-icon>

yeo-swiper（轮播图）

展示效果

描述

轮播组件，经过调整，笔者认为此结构与宽距都合适，所以开放属性有限。

属性说明

• dataArr示例（默认值）

    // 背景图数组数据
    dataArr: {
      type: Array,
      value: [{
          bgUrl: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2738668818,2590397852&fm=26&gp=0.jpg',
          title: 'Tomorr',
          time: '2021-1-5',
          isStar: false
        },
        {
          bgUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3569081884,3982453064&fm=26&gp=0.jpg',
          title: 'Thor',
          time: '2021-2-13',
          isStar: false
        },
        {
          bgUrl: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1105979147,3553146784&fm=26&gp=0.jpg',
          title: 'Red Coal',
          time: '2021-2-3',
          isStar: false
        }
      ]
    },

内部样式

事件

使用示例

index.wxml

<yeo-swiper></yeo-swiper>

yeo-tab-change（tab切换）

展示效果

描述

tab切换组件，为开发者提供在单页面的切换功能，开发者可根据自身需求对组件进行样式调整

属性说明

事件

使用示例

index.wxml

<view class="box">
  <yeo-tab-change></yeo-tab-change>
</view>

index.wxss

.box{
  padding-top: 50rpx;
  height: 1300rpx;
  background: #151515;
}

yeo-label-bar（标签切换页）

展示效果

描述

通过将yeo-tab-change组件与swiper原生组件相结合，通过数据绑定、数据监听、事件监听等方式结合而成，对于yeo-tab-change组件的部分属性可直接查看yeo-tab-change组件（部分：指除开我没写的部分）

属性说明

==其余没有写到的关于yeo-tab-change属性，都是可直接调用的同名属性！！==

使用示例

index.wxml

<yeo-label-bar tabArr='{{tabArray}}' currentTab='1' tabContHeight='{{maxHeight}}'>
  <view slot='{{tabArray[0]}}' class="tab-1">
    <view>{{tabArray[0]}}</view>
    <view>{{tabArray[0]}}</view>
    <view>{{tabArray[0]}}</view>
    <view>{{tabArray[0]}}</view>
    <view>{{tabArray[0]}}</view>
    <view>{{tabArray[0]}}</view>
  </view>
  <view slot='{{tabArray[1]}}' class="tab-2">
    <view>{{tabArray[1]}}</view>
    <view>{{tabArray[1]}}</view>
    <view>{{tabArray[1]}}</view>
  </view>
  <view slot='{{tabArray[2]}}' class="tab-3">
    <view>{{tabArray[2]}}</view>
    <view>{{tabArray[2]}}</view>
    <view>{{tabArray[2]}}</view>
    <view>{{tabArray[2]}}</view>
  </view>
</yeo-label-bar>

index.js

==其中演示的 TabInit() 方法非常重要，开发者只需要修改其中的选择器（.tab-1、.tab-2、.tab-3），就可以直接套用此方法，只是需要注意 tools 变量的相对路径==

// 1.这里的路径是相对于我的文件来说（开发者需要自行更改)
let tools = require('../../Yeo/utils/tools');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabArray: ['Yeo', '我的', '动态']
  },

  // 2.初始化tab页面高度
  TabInit() {
    // 新建数组
    let tabHeiArr = [];
    // 声明异步函数
    new Promise((resolve, reject) => {
      /* 
        分别获取每个tab页的内容高度
        .tab-1 .tab-2 .tab-3 都是选择器
      */
      tools.selectHeight('.tab-1').then(back => {
        tabHeiArr.push(back);
      });
      tools.selectHeight('.tab-2').then(back => {
        tabHeiArr.push(back);
      });
      tools.selectHeight('.tab-3').then(back => {
        tabHeiArr.push(back);
        // 获取完成改变Promise状态
        resolve('success');
      });
    }).then(res => {
      let newArr = tabHeiArr.sort((a, b) => a - b);
      // 最大高度
      let maxHeight = newArr[tabHeiArr.length - 1];
      this.setData({
        maxHeight: maxHeight * 2
      })
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 初始化tab高度
    this.TabInit();
  },
    
})

yeo-blur-card（滤镜卡片）

展示效果

描述

在描述文字背景处添加模糊滤镜的效果，增加用户观感。同时支持开发者对组件各个部位进行调节。

属性说明

事件

使用示例

index.wxml

<view class="box">
  <yeo-blur-card></yeo-blur-card>
</view>

index.wxss

.box {
  margin: 60rpx auto;
}

yeo-message-card（留言卡片）

展示效果

描述

评论组件，支持两种模式（暗黑模式与白天模式），除此之外，开发者可通过传入等级（1-7），为用户设定不同级别的头像挂件（如上图）

属性说明

事件

使用示例

index.wxml

<view class="box">
  <view class="inner">
    <yeo-message-card headPendant='0' userImg='../imgs/YHS-2.jpg'></yeo-message-card>
    <yeo-message-card headPendant='3' userImg='../imgs/YHS-3.jfif' content='文件来对本页面的窗口表现进行配置。'></yeo-message-card>
    <yeo-message-card headPendant='4' userImg='../imgs/YHS-2.jpg' content='在支持云调用的接口文档中，会分别列出 HTTPS 调用的文档及云调用的文档，云调用文档同 HTTPS 调用文档一样包含请求参数、返回值及示例。'></yeo-message-card>
    <yeo-message-card headPendant='5' content='小程序根目录下的 app.json 文件用来对微信小程序进行全局配置'></yeo-message-card>
    <yeo-message-card headPendant='7' userImg='../imgs/YHS-1.jpg'></yeo-message-card>
    <yeo-message-card headPendant='8' content='接口获得临时登录凭证 code 后传到开发者服务器'></yeo-message-card>
  </view>
</view>

index.wxss

.box {
  width: 100%;
  height: 1600rpx;
  background: #272727;
}
.inner {
  padding: 50rpx 30rpx 0;
}

yeo-loading（加载动画）

展示效果

描述

加载动画组件，开发者可改变背景覆盖色、加载点的大小、圆角、颜色等。

属性说明

使用示例

index.html

<!-- loading组件 -->
<yeo-loading isShowLoading='{{isShowLoading}}'></yeo-loading>

<!-- 模拟数据请求 -->
<view>我就是个摆设</view>
<view style="height: 500rpx;">
  <view wx:for="{{arr}}" wx:key='index'>
    <view style="height: 100rpx;width: 200rpx;">
      {{item}}
    </view>
  </view>
</view>
<view>我就是个摆设</view>

index.js

Page({
    
  /**
   * 页面的初始数据
   */
  data: {
    isShowLoading: true,
    arr: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 模拟数据加载过程
    setTimeout(()=>{
      this.setData({
        isShowLoading: false,
        arr: [123,23,454,4534,345]
      })
    },2000);
  },
    
})  

yeo-search（搜索栏）

展示效果

描述

搜索组件，开发者可根据爱好对搜索图标，占位文字进行更改，其次也可以根据自己需求对图标，输入框的位置与搜索框整体的大小进行更改。

属性说明

• inputType属性的适用值

事件

返回数据说明：具体内容请查看

使用示例

index.html

<view class="search">
  <yeo-search></yeo-search>
</view>

index.wxss

.search {
  margin: 40rpx auto 30rpx;
  width: 600rpx;
}

yeo-rotate（旋转的餐盘）

展示效果

描述

在紫色餐桌上左右滑动，即可切换餐盘，更换不同的美食哟！

属性说明

• vegtArr

    /* 
      传入旋转数据（暂时固定取四个元素）
      少于四个：传入默认数组
      多于四个：获取传入数据前四个元素
    */
    vegtArr: {
      type: Array,
      value: [
        'https://s3.ax1x.com/2021/03/09/63F1gS.png',
        'https://s3.ax1x.com/2021/03/09/63F3jg.png',
        'https://s3.ax1x.com/2021/03/09/63FYHs.png',
        'https://s3.ax1x.com/2021/03/09/63FJBj.png'
      ]
    }

事件

使用示例

index.wxml

<yeo-rotate></yeo-rotate>

yeo-anima-search（动画搜索）

展示效果

描述

附带动画效果的实时性搜索组件

属性说明

事件

使用示例

index.wxml

<yeo-anima-search model:bindvalue="{{pageValue}}" bind:searcontevent="changeSearCont" searBackArr="{{searArr}}">
</yeo-anima-search>

index.js

 /**
   * 页面的初始数据
   */
  data: {
    // 双向绑定数据
    pageValue: ''
  },

  // 改变数据搜索内容
  changeSearCont(e) {
    if (e.detail.searCont) {
      // 获取实时搜索内容
      let searCon = e.detail.searCont;
      wx.request({
        // 这里是作者本人接口，支持与否，取决于作者是否进行了后期服务器续费操作
        url: 'https://yundingxikj.cn/weixin/search/' + searCon,
        success: res => {
          console.log(res.data);
          // 构建新数组，存入返回值
          let searArr = res.data.filter((value, index) => {
            return index < 3;
          }).map((value, index) => {
            let obj = {};
            obj.tit = value.articleTitle;
            obj.desc = value.articleSummary.substring(0,14);

            return obj;
          })

          this.setData({
            searArr: searArr
          })
        },
        fail: res => {
          wx.showToast({
            icon: 'none',
            title: '网络错误，请稍后再试',
          })
        }
      })
    } else {
      console.log('暂无搜索值');
    }

  },

yeo-horizon-slider（横向滑动栏）

展示效果

描述

向右滑动展示更多内容

属性说明

事件

使用示例

index.wxml

<yeo-horizon-slider sliderArr='{{sliderArr}}' bind:clickevent='clickObj'></yeo-horizon-slider>

index.js

  /**
   * 页面的初始数据
   */
  data: {
    // 传入数组数据
    sliderArr: [{
        picUrl: 'https://s3.ax1x.com/2021/03/09/63FNEn.jpg',
        title: '怦然心动',
        description: '月亮将会奔你而来',
        picBorder: ''
      },
      {
        picUrl: 'https://s3.ax1x.com/2021/03/09/63FUNq.jpg',
        title: '傲慢与偏见',
        description: '以灵魂唤醒灵魂',
        picBorder: ''
      },
      {
        picUrl: 'https://s1.ax1x.com/2020/08/02/aYQfFx.jpg',
        title: '老人与海',
        description: '老人与海的固执',
        picBorder: ''
      },
      {
        picUrl: 'https://s1.ax1x.com/2020/08/02/aYlncF.jpg',
        title: '复仇者联盟',
        description: '以父之名论英雄',
        picBorder: ''
      },
    ]
  },

  // 点击事件
  clickObj(e) {
    // 监听触发目标
    console.log(e.detail.clickObj);
  },

yeo-horizon-slider-v2（横向滑动栏-v2）

展示效果

描述

向右滑动展示更多内容

属性说明

事件

使用示例

index.wxml

<yeo-horizon-slider-v2 sliderArr='{{sliderArr}}' bind:clickevent="clickObj">
</yeo-horizon-slider-v2>

index.js

 /**
   * 页面的初始数据
   */
  data: {
    sliderArr: [
      {picUrl: '../../images/computer.png',bgColor: '#EBDFFF',title: 'Article',num: 19},
      {picUrl: '../../images/earphone.png',bgColor: '#C4EFFC',title: 'Category',num: 6},
      {picUrl: '../../images/router.png',bgColor: '#948CFF',title: 'Module',num: 3}
    ]
  },

  // 获取点击对象
  clickObj(e) {
    // 获取点击对象
    console.log(e.detail.itemObj);
  },

yeo-dyfunbar（动态功能栏）

展示效果

描述

动态功能栏，可以根据自我需求对功能栏进行改变，整个组件分别有左、中、右三个部分组成

属性说明

• distractWay具体属性值

事件

插槽

总体功能栏是分三个部分的，每个部分都对应一个槽位供开发者自行添加

  <yeo-icon slot='dy-left' IconSize='40' iconUrl='../imgs/back-2.png'></yeo-icon>
  <yeo-search slot='dy-center'></yeo-search>
  <yeo-icon slot='dy-right' IconSize='40' iconUrl='../imgs/分类.png'></yeo-icon>

使用示例

index.wxml

<!-- 组合方式-1   icon/search/icon-->
<yeo-dy-fun-bar>
  <yeo-icon slot='dy-left' IconSize='40' iconUrl='../imgs/back-2.png'></yeo-icon>
  <yeo-search slot='dy-center'></yeo-search>
  <yeo-icon slot='dy-right' IconSize='40' iconUrl='../imgs/分类.png'></yeo-icon>
</yeo-dy-fun-bar>

<!-- 组合方式-2   hangSwing/search/hangSwing-->
<yeo-dy-fun-bar>
  <yeo-hang-swing slot='dy-left'
  ImgSize='70'></yeo-hang-swing>
  <yeo-search slot='dy-center'></yeo-search>
  <yeo-hang-swing slot='dy-right'
  ImgSize='70'></yeo-hang-swing>
</yeo-dy-fun-bar>

<!-- 组合方式-3   hangSwing/search/icon-->
<yeo-dy-fun-bar>
  <yeo-search slot='dy-center'></yeo-search>
  <yeo-icon slot='dy-right' IconSize='40' iconUrl='../imgs/分类.png'></yeo-icon>
</yeo-dy-fun-bar>

<!-- 组合方式-4   hangSwing/自定义/icon-->
<yeo-dy-fun-bar distractWay='between' sideDistance='30' bind:centerevent='centerTap'>
  <yeo-icon slot='dy-left' IconSize='40' iconUrl='../imgs/back-2.png'></yeo-icon>
  <view slot='dy-center'>我就是个所谓的标题</view>
  <yeo-icon slot='dy-right' IconSize='40' iconUrl='../imgs/分类.png'></yeo-icon>
</yeo-dy-fun-bar>

yeo-hang-swing（摇摆吊灯）

展示效果

描述

传入一张图片，按照(50%,0)的图形中心点进行摆动

属性说明

事件

使用示例

index.wxml

<yeo-hang-swing ImgSize='80'></yeo-hang-swing>

yeo-simple-card（简卡）

展示效果

描述

根据自我喜好配置不同颜色的简卡

属性说明

事件

使用示例

index.wxml 与 index.wxss

<view class="outbox">
  <view class="inner">
    <yeo-simple-card />
  </view>
  <view class="inner">
    <yeo-simple-card BackgroundColor='#F3C143'/>
  </view>
  <view class="inner">
    <yeo-simple-card BackgroundColor='#9AC656'/>
  </view>
  <view class="inner">
    <yeo-simple-card BackgroundColor='#59B9B4'/>
  </view>
</view>

.outbox {
  width: 93%;
  margin: 30rpx auto 0;
}
.outbox .inner {
  margin-bottom: 27rpx;
}

yeo-card（介绍卡片）

展示效果

描述

这是一个关于自我介绍的卡片，

属性说明

事件

使用示例

index.wxml 与 index.wxss

<view class="pageBox">
  <yeo-card />
</view>

.pageBox {
  margin: 70rpx auto;
}

yeo-tab-bar（底部栏）

展示效果

描述

通过Vue构建组件的形式，将整个组件拆分为了两个块（YeoTabBar组件与YeoTabBarItem组件），用户可以根据自身需求，自定义tabbar中item个数（经过测试，3~5个效果最佳）

属性说明

• ==YeoTabBarItem组件==

• ==YeoTabBar组件==

使用示例

index.wxml

<yeo-tab-bar backgroundCol='#2E3B4A'>
  <yeo-tab-bar-item isSelect='1' selectWordsCol='#5BC6FA'>
    <image slot='pic-select' src="../../images/首页-select.png"></image>
    <image slot='pic' src="../../images/首页.png"></image>
    <view slot='tit'>首页</view>
  </yeo-tab-bar-item>

  <yeo-tab-bar-item isSelect='0' selectWordsCol='#5BC6FA'
  jumpUrl='/pages/yeo-hangswing/yeo-hangswing'>
    <image slot='pic-select' src="../../images/分类-select.png"></image>
    <image slot='pic' src="../../images/分类.png"></image>
    <view slot='tit'>分类</view>
  </yeo-tab-bar-item>

  <yeo-tab-bar-item isSelect='0' selectWordsCol='#5BC6FA'
  jumpUrl='/pages/yeo-dyfunbar/yeo-dyfunbar'>
    <image slot='pic-select' src="../../images/我的-select.png"></image>
    <image slot='pic' src="../../images/我的.png"></image>
    <view slot='tit'>我的</view>
  </yeo-tab-bar-item>
</yeo-tab-bar>

yeo-flow-waterfall-box（瀑布流布局外框架）

展示效果

描述

瀑布流布局的外框架，内容由开发者自行定义

插槽

<yeo-flow-waterfall-box>
  <yeo-text-box></yeo-text-box>
  <yeo-text-box></yeo-text-box>
</yeo-flow-waterfall-box>

使用示例

index.wxml

<yeo-flow-waterfall-box>
  <!-- 奇数 -->
  <yeo-text-box wx:for="{{dataArr}}" wx:key='index' wx:if="{{index % 2 == 0}}" content='{{item.content}}'></yeo-text-box>

  <!-- 偶数 -->
  <yeo-text-box wx:for="{{dataArr}}" wx:key='index' wx:if="{{index % 2 != 0}}" content='{{item.content}}'></yeo-text-box>
</yeo-flow-waterfall-box>

<!-- 添加数据 -->
<button bindtap="add">添加</button>

index.wxss

yeo-text-box {
  display: inline-block;
  margin-bottom: 20rpx;
}

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataArr: [{
        content: '我是一个人在游走的时候我送山大佛都发生的的撒佛1'
      },
      {
        content: '我是一个人在游走的时候我送山大佛都发生的的撒佛2'
      },
      {
        content: '我是一个人在游走的时候我送山大佛都发生的的撒佛3'
      },
      {
        content: '我是一个人在游走的时候我送山大佛都发生的的撒佛4'
      },
      {
        content: '我是一个人在游走的时候我送山大佛都发生的的撒佛5'
      },
      {
        content: '我是一个人在游走的时候我送山大佛都发生的的撒佛6'
      },
    ]
  },

  // 添加数据
  add() {
    let dataArr = this.data.dataArr;
    let newArr = [{
        content: '我是新数据，看好了1'
      },
      {
        content: '我是新数据，看好了2'
      },
      {
        content: '我是新数据，看好了3'
      },
      {
        content: '我是新数据，看好了4'
      },
      {
        content: '我是新数据，看好了5'
      },
      {
        content: '我是新数据，看好了6'
      },
    ];
    this.setData({
      dataArr: dataArr.concat(newArr)
    })
  },
})

yeo-flow-waterfall（瀑布流布局）

展示效果

描述

组件采用两列式的流式布局，开发者通过传入数组数据（图片、名称、点赞数等）对组件进行数据插入，其次对于组件的样式进行样式接口的开放

属性说明

事件

使用示例

index.wxml

<yeo-flow-waterfall></yeo-flow-waterfall>

yeo-text-box（文本框）

展示效果

描述

日记框，开发者可自由更改文本框大小（外层加样式）、文本框内文字颜色与大小

属性说明

事件

使用示例

index.wxml 与 index.wxss

<view class="box">
  <yeo-text-box></yeo-text-box>
</view>

.box {
  margin: 30rpx 200rpx 0;
}

yeo-diary-box（日记框）

展示效果

描述

日记框，开发者可自由更改日记框大小（外层加样式）、日记框内文字颜色与大小

属性说明

事件

使用示例

index.wxml 与 index.wxss

<view class="box">
  <yeo-diary-box></yeo-diary-box>
</view>

.box {
  margin: 30rpx 20rpx 0;
}

yeo-stamp-text（邮票文本框）

展示效果

描述

邮票框，开发者可自行调整邮票图片、信件内容、用户名与时间

属性说明

事件

使用示例

index.wxml 与 index.wxss

<yeo-stamp-text></yeo-stamp-text>

page {
  background: #f6f6f6;
}

yeo-label-box（标签框）

展示效果

描述

在此框中，下部分的小字描述是slot插槽部分，可动态变化（通过具名slot)

属性说明

事件

插槽

此组件需要使用具名插槽作为小字内容

<view slot='content'>文字内容</view>

使用示例

index.wxml 与 index.js

<!-- 标签框组件 -->
<yeo-label-box titleWords='Java工程师面试考点' bind:clickevent='clickEvent'>
  <view slot='content'>· Java学成什么样子可以找到工作?</view>
  <view slot='content'>· Java学成什么样子可以找到工作?不要去抱怨这些没有的启迪大水发？</view>
</yeo-label-box>

<!-- 标签框组件 -->
<yeo-label-box looks='100000' bind:clickevent='clickEvent'>
  <view slot='content'>从而使表格偶数行和奇数行颜色不一样。这样的兼容性很好。但是最近在做手机网站的时候，由于手机网站对浏览器兼容
  </view>
</yeo-label-box>

// 点击组件
  clickEvent(e) {
    console.log(e);
    console.log('标签框被点击');
  },

yeo-stretch（动态伸缩模块）

展示效果

描述

通过点击闪动的闪电小图标（当然你也可以更换），动态伸缩展示具体内容，展示内容通过具名插槽传入，同时展开后支持向下滑动，也就是说不限制插槽内容高度。

属性说明

插槽

index.wxml

  <yeo-stretch>
    <!-- 插槽 -->
    <view slot='content'>
     	<!-- 插入内容 -->
    </view>
  </yeo-stretch>

使用示例

index.wxml

<view class="box">
  <yeo-stretch>

    <!-- 传入组件作为插槽内容 -->
    <view slot='content'>
      <yeo-label-box>
        <view slot='content'>
          左右和啥打法上撒旦法四大发顺丰下次茶多酚爱的色放奥的斯是驾驶的立法奥德赛放假啊实打实说的覅偶而忘记微微辣插卡积分ad佛阿斯蒂芬
        </view>
      </yeo-label-box>

      <yeo-label-box>
        <view slot='content'>
          左右和啥打法上撒旦法四大发顺丰下次茶多酚爱的色放奥的斯是驾驶的立法奥德赛放假啊实打实说的覅偶而忘记微微辣插卡积分ad佛阿斯蒂芬
        </view>
      </yeo-label-box>

      <yeo-label-box>
        <view slot='content'>
          左右和啥打法上撒旦法四大发顺丰下次茶多酚爱的色放奥的斯是驾驶的立法奥德赛放假啊实打实说的覅偶而忘记微微辣插卡积分ad佛阿斯蒂芬
        </view>
      </yeo-label-box>
    </view>

  </yeo-stretch>
</view>

index.wxss

.box {
  margin: 30rpx 0 30rpx 50rpx;
}

yeo-tools-bar（工具栏）

展示效果

描述

点击中心图标，工具栏动画展开；再次点击复原

属性说明

事件

使用示例

index.wxml 与 index.js

<yeo-tools-bar bind:upevent='upEvent'></yeo-tools-bar>

// 监听上图标事件
  upEvent(e) {
    console.log(e);
  },

==yeo-comment==（评论组件）

展示效果

描述

整个评论组件其实是由前面的三个组件组合而成（yeo-art-font、yeo-dyfunbar、yeo-message-card），通过适当调整开发而成，为了达到最优展示效果，笔者提供的开发属性与接口相对减少，只对外开放必要属性进行更改（其实我就是懒）

属性说明