i-uniapp组件库

i-uniapp组件库的API使用说明：

以下对各个组件进行了详细的功能介绍以及API说明

组件按照github和dcloud更新顺序来做介绍~~

github地址： https://github.com/1018715564/i-uniapp
dcloud插件市场地址： https://ext.dcloud.net.cn/plugin?id=831

common-touch

功能：支持自定义区域监听左滑动和右滑动（上滑动和下滑动即将更新...）
支持传入参数： touchXY 【意义：“传入的移动距离”，类型：“Number”,示例：“60”，默认值：“无，必填项参数”】

如果滑动的距离大于传入的touchXY，那么就触发回调函数：

触发事件： onchange 【参数：“left为左滑，right为右滑”】

示例demo：

引入组件：import commonTouchMove from "@/components/laoshen-startComponents/common-touchMove";

注册组件

components: {
    commonTouchMove
  },

写法：

<commonTouchMove @onchange="moveChange" touchXY="70">
    包含着滑动的区域，可实现此区域上的滑动监听
</commonTouchMove>

common-headerCommon

功能：头部组件，颜色可以前往组件中自行修改，依赖了任务栏组件
支持传入参数：
headerTitle【意义：“页面标题”，类型：“String”，示例：“预定订单”，“默认值”：“”】；
backShow 【意义：“是否显示back按钮”，类型：”Boolean“，示例：”true“， 默认值：”true“】
right 【意义：”自定义右侧显示内容“，类型：”Object“，示例：{icon: "这里写iconfont的class类名"，style：“width: 100px;height: 100px;”, name: "这里写名称，如果是图标这边可以不写，如果不是图标这里写名称"，listen：“点击右侧的按钮回调，shareopen，点击按钮之后，会在shareopen这个事件中监听到”}】

示例demo：

引入组件： import commonHeader from "@/components/laoshen-startComponents/common-headerCommon";

注册组件

components: {
    commonHeader
  },

写法：

<commonHeader headerTitle="立即预定" :right="right" @share="shareOpen"></commonHeader>

data(){
    return {
       right: {
         name: "",
         icon: "iconfenxiang",
         style: "color:#fff;font-size:18px;",
         listen: "shareOpen"
      },
    }
}

这个显示出来，是一个图标（iconfont图标）

common-share

功能：分享组件，内容和图片自定义
支持传入参数：
show【意义：“是否显示，true为显示，false为隐藏”，类型：“Boolean”，默认值：“false”】
share【意义：“自定义内容”，类型：“Array”，默认值：“[]”】
title【意义：“标题内容”，类型：“String”, 默认值：“分享到”】
回调函数：
clickIndex ：点击了组件上的第几个图标/文字/内容
shareClose ：关闭分享弹窗的回调（点击灰色区域会触发，点击了底部的关闭也会触发）

示例demo：

import commonShare from "@/components/laoshen-startComponents/common-share";

注册组件：

 components: {
    commonShare
  },

写法：

<commonShare
  @clickIndex="shareClickIndex"
  :show="shareShow"
  @shareClose="shareClose"
  :share="shareList"
></commonShare>

data数据源：

  data(){
    return{
    shareList: [
        {
          name: "微信好友",
          url: "./../../static/sharemenu/wechatfriend.png" // 图片路径
        },
     ],
     shareShow: false
    }
  },

methods方法

methods: {
    shareClickIndex(v){
         console.log(v); // 点击的索引   
    },
    shareClose(){
        this.shareShow = false; // 关闭弹窗
    },
}

tips: 建议添加animate.css这个库，这个组件使用了动画，在main.js使用之后，那么将很好看
animate.css库下载地址： https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

import 'assets/css/animate.css' //main.js引入它

common-select

功能：选择select组件
支持传入的参数：
selectlist 【意义：“选择框内容”，类型：“Object”，默认值：“null”】
showIndex 【意义：“显示第几个值”，类型：“Number和String”，默认值：“null”】
top 【意义：“层级是否最高”，类型：“Boolean”，默认值：“false”】
回调函数
onChange ：用户选择的回调，值是一个对象：
{name：选择的select名称，val：选择的value值，index: 选中的第几个值}

示例demo：

import commonSelect from "@/components/laoshen-startComponents/common-select";

注册组件：

 components: {
    commonSelect
  },

写法：

    <commonSelect
        :showIndex="selectList[0].showIndex"
        :selectlist="selectList[0]"
        @onChange="changeSelect"
      ></commonSelect>

data数据源：

selectList: [
    {
      name: "时间区间",
      val: ["一个月内", "三个月内", "六个月内", "六个月以上"],
      showIndex: 0
    },
    {
      name: "标签筛选",
      val: ["全部", "标签筛选", "重要客户", "快成交客户", "意向客户"],
      showIndex: 0
    }
  ]

methods方法：

selectChange(v){
    // 在这里判断这个对象中的name属性是否是自己想要的name
    if(v.name === "时间区间"){
        this.selectList[0].showIndex = v.index; // 把当前选中的索引附给showIndex改变组件展示的值
    }
}

tips: 关于name的设计，如果设置了name，在一些业务场景不需要监听多个事件来分别做数据处理，只需要监听一个，通过name来判断，做对应的数据改变即可

common-PageHelper

功能： 分页器，自动auto排序，颜色优雅，没有边界情况
支持传入的参数：
total 【意义：“页数总数”，类型：“Number/String”，默认值：“0”】
now_page 【意义：“当前页数”，类型：“Number/String”，默认值：“1”】
page_size 【意义：“一页显示多少条记录”，类型：“Number/String”，默认值：“10”】
回调函数
pageChange : 页面变化/用户选择下一页上一页/用户点击具体页数

示例demo：

import commonPageHelper from "@/components/laoshen-startComponents/common-pageHelper"

注册组件：

components: {
commonPageHelper
   },

写法：

    <commonPageHelper @pageChange="pageChange" :total="dataTotal" :now_page="now_page" page_size="10"></commonPageHelper>

methods方法：

pageChange(index){
  this.page = index; // index即当前用户选择的页数
  ajax there.... // 这里发请求
},