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.... // 这里发请求
},
第二波更新: share和select组件