Demo

Live demo

Install

NPM

npm install xxy

*Tips: npm的账号密码我忘了，所以，上面的npm安装版本是很早以前的版本，大概去年的，所以大家请用github上的版本

SRC

https://0123cf.github.io/xxy/xxy.js

Usage

config:

// 配置  非必选项
var config = {
    // 蒙版不透明度 默认.5
    mask: .3,
    // 风格 分'ios'和'android' (小写) 
    skin: 'ios',
    // 动画配置项 默认false
    an: true
};
xxy.config(config);

默认一个参数的时候，是popup的配置，toast的配置需要前面加toast
xxy.config('toast', config见下面的toast介绍)
/* 
 * tips:
 * 目前只配置了ios，安卓还未添加（欢迎大家提交pr）
 */

Div Style

<style id="{{config}}"></style>
config:
    xxy-style-popup <!-- 弹窗 -->
    xxy-style-toast <!-- toast -->
    xxy-style-touch <!-- 上下拉滑动 --> 

popup:

xxy.popup('标题'，'内容,支持插入标签','左按钮文字','右按钮文字',function(e){ 
  //点击后回调： 
  //e==0 点击了左按钮，e==1 点击右按钮 
   //回调了可以继续调用自身。 
}); 
 // 支持不添加回调不添加标题文字，但是左按钮与右按钮必须成对出现
 // xxy.popup('正文')
 // xxy.popup('标题', '正文')
 // xxy.popup('标题', '正文'， '左按钮', '右按钮')
 // xxy.popup('正文', 回调函数)
 // 更多规则可以自己测试， 比较弹性

alert:

xxy.alert('标题','HTML','按钮文字',function(){
	console.log('回调')
})
 // xxy.alert('正文')
 // xxy.alert('标题', '正文')
 // xxy.alert('标题', '正文'， '按钮文字')
 // xxy.alert('正文', 回调函数)
 // xxy.alert('标题', '正文', 回调函数)

template

自定义模板内容

参数介绍

xxy.template(html内容, callback)   // callback可选， 点击后回调
//xxy.template(`
//	<div>div内容</div>
//	<off>关闭</off>
//`)
xxy.template(querySelectOr)
// xxy.template('#id')
// xxy.template('#id .class')

tips： 不用off的话，也可以用xxy.popupClose()关闭弹窗 在vmmv框架里面一般用了off这个标签都会红色不明标签提示，忽略即可

在vue里面的使用的例模板的例子：

<template>
      <div style="display: none">
        <div class="op-coupon-group">
            <ul>
              <li v-for="item in couponList">{{item.name}}</li>
            </ul>
            <off>关闭</off>
          </div>
        </div>
      </div>
</template>

xxy.template('.op-coupon-group')

popupClose

代码关闭弹窗

xxy.popupClose()

toast:

 xxy.toast('内容','消失时间[ms]');
 // xxy.toast('内容','方向（bottom, top, center）');

第二个参数可以是时间也可以是方向，更多复杂的操作，第二个参数是Object

xxy.toast(000, {
	exp: 500, // 消失时间
	site: 'center',  // 垂直位置
	more: { // 自定义样式
		'width': '100px',
		'border-radius': '5px',
		'background': 'rgba(255,0,0,.4)'
	}
})

如果一组都需要配置相同的，这时候应该使用组配置，比如regist模块需要用特定的toast

xxy.config('toast', {
	exp: 2000,
	site: 'center',
	more: {
		'width': '100px',
		'border-radius': '5px',
		'background': 'rgba(51,51,51,.5)'
	}
})

上拉刷新，下拉加载

• 创建Div容器 最外层的ID自定义
• Js实例化And配置

DIV

<div id="comlist" class="xxy-down-viewbox comlist">
	<div class="view" data-befor = "下拉刷新" data-after = "上拉加载" >
		<div class="inner">
			<!-- 自定义内容 -->
			<ul class="list">
				
				
			</ul>
			<!-- 自定义内容 -->
		</div>
	</div>
</div>

Javascript

	var test= new xxy.touch()
	test.bind(Dom节点,config)

config

{
	//滑动 默认false 设置true开启
	move: true,
	//上拉回调
	up: callback
	//下拉回调
	down: callback
}
```	

###### backcall

``` js
function(){
  ajax.get(url)
   .then(()={
      // 表示加载完成
      this.done();
  })
}

Javascript测试代码

var test= new xxy.touch();
	test.bind(document.querySelector('#comlist'),{
		move: true,
		up: function(){
			window.setTimeout(function(){
				this.done();
				xxy.toast('加载成功')
			}.bind(this),3000)
		},
		down: function(){
			window.setTimeout(function(){
				this.done();
				xxy.toast('刷新成功')
			}.bind(this),1000)
		}
	});	

轮播

• 创建Div容器 最外层的ID自定义
• Js实例化

DIV

<div id="banner-wrap">
    <ul>
	<li>
		<div>1</div>
	</li>
	<li>
		<div>2</div>
	</li>
	<li>
		<div>3</div>
	</li>
    </ul>
    <!-- 这里可以配置点击切换，详情看demo -->
</div>

// tip: 在virtual Dom 里面不建议使用（如果是纯图片无所谓）， 不会里面的元素操作会报错， 因为为了达到动画效果， 会复制一份html出来， 这时候虚拟dom没办法同事更新两个， 虽然可以手动添加， 但还是不建议。 请使用相关组件

Javascript

// 轮播
var baner = xxy.slider()
var bConfig = {
	// 非必须
	time: 10*1000
}
baner.bind(document.querySelector("#banner-wrap"),bConfig)
// 监听gap[非必选项]
baner.on('gap',function(e){
	// 这是手指滑动的距离
	console.log(e)
})

History record：

• 弹窗蒙版兼容阻止（兼容pc和移动端） -
• 兼容了iframe在苹果的出现fiexd问题。
• 弹窗增加PC端的支持（包括ie8）
• 设置内容最高值，阻止冒泡，超出可滑动滚动。
• 添加alert函数
• 修复total width在flex的问题
• 添加支持多指触控，上拉加载，下拉刷新。
• 添加上下拉回调
• 添加弹窗关闭函数
• 添加弹窗自定义模板
• 调整流畅度，添加滑动的硬件加速
• 添加toast的自定义样式配置和全局配置（组配置）