xs-ionic-module

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 ---图片链接

注意：

    1、xs-img-lazy-load必须设置宽高，否则图片显示异常

    2、xs-img-lazy-load的定位父级offsetParent必须是ion-content或ion-scroll，所以写布局的时候一定要注意慎用position

核心代码
<xs-img-lazy-load delegate-handle="newsScroll" img-url="{{mynew.thumbnail_pic_s}}"></xs-img-lazy-load>

示例代码：
》》》controller：
complete(){//滚动完成后通知当前在屏幕内的图片进行加载
  this.$scope.$broadcast('xsImg.LoadImg');
}
$http.get('http://oimam66tq.bkt.clouddn.com/index.json').then((data)=>{
  this.news = data.data;
})
》》》页面：
<ion-view view-title="登录" class="login-view">
  <style>
    .klitem{
      width: 95%;
      display: flex;
      height: 120px;
      margin: 0 auto;
      border-bottom: 1px solid #ccc;
    }
    .klitem .lazy-left{
      width: 120px;
    }
    .klitem .lazy-right{
      flex:1;
      padding:10px 0;
      position: relative;
    }
    .klitem .lazy-right .title{
      font-size: 16px;
      font-weight: 400;
      margin: 0;
      padding: 0;
      color: #000;
      position: absolute;
      left: 0;
      top:12px;
    }
    .klitem .lazy-right .author{
      position: absolute;
      bottom: 15px;
      left: 0;
    }
    .klitem .lazy{
      height: 100px;
      width: 100px;
      margin-top: 10px;
      margin-left: 10px;
      border: 1px solid #ccc;
    }

  </style>
  <ion-content delegate-handle="newsScroll" on-scroll-complete="$login.complete()">
    <div class='klitem' ng-repeat="mynew in $login.news">
      <div class="lazy-left">
        <xs-img-lazy-load class="lazy" delegate-handle="newsScroll" img-url="{{mynew.thumbnail_pic_s}}"></xs-img-lazy-load>
      </div>
      <div class="lazy-right">
        <div class="title">{{mynew.title}}</div>
        <div class="author">{{mynew.author_name}}</div>
      </div>
    </div>
  </ion-content>
</ion-view>