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.... // 这里发请求
},

评论啦~



唉呀 ~ 仅有一条评论


  1. 老沈-enjoy管理员
    老沈-enjoy管理员 博主

    第二波更新: share和select组件

    回复 2019-10-04 17:04