xs-ionic-module v1.1.3

ionic公用组件

本项目基于基于angular1.5.3和ionic1.3.2进行开发,其中的组件适用于ionic+es6开发的项目。当然你也可以把代码clone下来，自己修改成es5的代码。

github地址

安装

Step One

npm install xs-ionic-module --save
或者：
npm install https://github.com/xieshiCoder/xs-ionic-module.git --save

Step Two

import xsIonicModule from 'xs-ionic-module';

Step Three

在需要的模块中对组件进行依赖
例：
angular.module('app',[xsIonicModule.xsCityPicker,         //地市滚动选择组件
  xsIonicModule.xsDatePicker,         //日期滚动选择组件
  xsIonicModule.xsImgSlide,           //图片全屏滑动展示组件
  xsIonicModule.xsImgLazyLoad])       //列表图片懒加载

使用

1、地市滚动选择组件使用

参数说明和演示：

核心代码：
<xs-city-picker source='$myController.source' tag='-' cancel-text='取消' confirm-text='确定' title='地市选择' sel-val='$myController.selVal'></xs-city-picker>

2、日期滚动选择组件使用

参数说明和演示：

核心代码：
<xs-date-picker cancel-text='取消' confirm-text='确定' title='地市选择' sel-val='$myController.selVal'></xs-date-picker>

3、图片全屏滑动展示组件

参数说明和演示：
img-arr ---图片数组 current-index ---当前图片在数组中的索引，从0开始

核心代码:  
<xs-img-slide img-arr="$myController.imgs" current-index="1"></xs-img-slide>

### 4、列表图片懒加载
>参数说明和演示：  
delegate-handle ---当前图片所处的ion-content的delegate-handle或者是ion-scroll的delegate-handle
img-url ---图片链接
<h4>注意：</h4>
<h4>&nbsp;&nbsp;&nbsp;&nbsp;1、xs-img-lazy-load必须设置宽高，否则图片显示异常</h4>
<h4>&nbsp;&nbsp;&nbsp;&nbsp;2、xs-img-lazy-load的定位父级offsetParent必须是ion-content或ion-scroll，所以写布局的时候一定要注意慎用position</h4>

![演示](https://github.com/xieshiCoder/xs-ionic-module/blob/master/Screenshot/lazyload.gif)

核心代码

示例代码： 》》》controller： complete(){//滚动完成后通知当前在屏幕内的图片进行加载 this.$scope.$broadcast('xsImg.LoadImg'); } $http.get('http://oimam66tq.bkt.clouddn.com/index.json').then((data)=>{ this.news = data.data; }) 》》》页面：