
mui中美丽的popover
新手 在mui中找不到我想要的弹框类型的模拟窗口,自己改了一下
<div id="chosesku" style="background: #FFFFFF;" class="chosesku box mui-popover mui-popover-action mui-popover-bottom">
<div class="choseskuimg">
<img style=" border-radius: 5px; width: 70px ;height: 90px;" src="../images/shuijiao.jpg" />
</div>
<div style="margin-top: 25px; margin-left: 90px;">
<h4 style="color: red;">¥9999</h4>
<h5>商品号:44050505</h5>
</div>
<div class="solid"></div>
<!--sku选项 -->
<div>
<h5 style="margin-left: 5px;margin-top: 10px;">颜色</h5>
<input class="sku" type="button" value="白色" />
<input class="sku" type="button" value="红色" />
<input class="sku" type="button" value="黑色" />
<input class="sku" type="button" value="灰色" />
<input class="sku" type="button" value="灰白色" />
</div>
<div>
<h5 style="margin-left: 5px;margin-top: 10px;">体重</h5>
<input class="sku" type="button" value="1kg" />
<input class="sku" type="button" value="1.5kg" />
<input class="sku" type="button" value="1.8kg" />
</div>
<div class="solid"></div>
<div style="margin-top: 10px;">
<h5 style="margin-left: 5px;margin-top: 10px;display: block;float: left;">数量</h5>
<div class="mui-numbox " style="width: 130px;height: 33px;float: right;" data-numbox-min='1' data-numbox-max='99'>
<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
<input id="id_item_count" class="mui-input-numbox" type="number" />
<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div>
</div>
<div class="footer">
<button type="button" class="mui-btn mui-btn-warning mui-btn-block">加入购物车</button>
</div>
</div>
点击弹出
<a href="#chosesku">
<div style="margin-top: 10px; border-top: solid 0.5px #E8E8E8;border-bottom: solid 0.5px #E8E8E8;height: 55px;">
<p style="float:left">已选:</p>
<h5 style="">白喵,灰白,官方标配!白喵,</h5>
<div style="float: right;margin-top: -20px;font-size: 30px;margin-right: 10px;">…</div>
</div>
</a>
新手 在mui中找不到我想要的弹框类型的模拟窗口,自己改了一下
<div id="chosesku" style="background: #FFFFFF;" class="chosesku box mui-popover mui-popover-action mui-popover-bottom">
<div class="choseskuimg">
<img style=" border-radius: 5px; width: 70px ;height: 90px;" src="../images/shuijiao.jpg" />
</div>
<div style="margin-top: 25px; margin-left: 90px;">
<h4 style="color: red;">¥9999</h4>
<h5>商品号:44050505</h5>
</div>
<div class="solid"></div>
<!--sku选项 -->
<div>
<h5 style="margin-left: 5px;margin-top: 10px;">颜色</h5>
<input class="sku" type="button" value="白色" />
<input class="sku" type="button" value="红色" />
<input class="sku" type="button" value="黑色" />
<input class="sku" type="button" value="灰色" />
<input class="sku" type="button" value="灰白色" />
</div>
<div>
<h5 style="margin-left: 5px;margin-top: 10px;">体重</h5>
<input class="sku" type="button" value="1kg" />
<input class="sku" type="button" value="1.5kg" />
<input class="sku" type="button" value="1.8kg" />
</div>
<div class="solid"></div>
<div style="margin-top: 10px;">
<h5 style="margin-left: 5px;margin-top: 10px;display: block;float: left;">数量</h5>
<div class="mui-numbox " style="width: 130px;height: 33px;float: right;" data-numbox-min='1' data-numbox-max='99'>
<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
<input id="id_item_count" class="mui-input-numbox" type="number" />
<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div>
</div>
<div class="footer">
<button type="button" class="mui-btn mui-btn-warning mui-btn-block">加入购物车</button>
</div>
</div>
点击弹出
<a href="#chosesku">
<div style="margin-top: 10px; border-top: solid 0.5px #E8E8E8;border-bottom: solid 0.5px #E8E8E8;height: 55px;">
<p style="float:left">已选:</p>
<h5 style="">白喵,灰白,官方标配!白喵,</h5>
<div style="float: right;margin-top: -20px;font-size: 30px;margin-right: 10px;">…</div>
</div>
</a>

控制wifi
/*
仅支持android
*/
window.WIFI = function() {
this.init();
}
/**
-
初始化
*/
WIFI.prototype.init = function() {
var Context = plus.android.importClass("android.content.Context");
plus.android.importClass("android.net.wifi.WifiManager");
plus.android.importClass("java.util.List");
plus.android.importClass("java.util.ArrayList");
plus.android.importClass("android.net.wifi.ScanResult");
plus.android.importClass("android.net.wifi.WifiInfo");
plus.android.importClass("java.util.BitSet");this.WifiConfiguration = plus.android.importClass("android.net.wifi.WifiConfiguration");
this.wifiManager = plus.android.runtimeMainActivity().getSystemService(Context.WIFI_SERVICE);
}
/**
- 获取wifi列表
*/
WIFI.prototype.getAllList = function() {
return this.wifis = this.wifiManager.getScanResults();
}
/**
- 校验ssid 返回的是有此ssid的wifi个数
-
@param {Object} ssid wifi名
*/
WIFI.prototype.checkSsid = function(ssid) {
var list = this.wifiManager.getScanResults();
var len = list.size();
var num = 0;
for(var i = 0; i < len; i++) {
var tmp = list.get(i);if(tmp.plusGetAttribute('SSID') == ssid) { console.log('checkSsid === ' + i + '>>' + tmp.plusGetAttribute('SSID')) num++; }
}
return num;
}
/**
- 移除已经存在的ssid
- @param {Object} ssid wifi名
*/
WIFI.prototype.removeExsits = function(ssid) {
var list = this.wifiManager.getConfiguredNetworks(); //获取到已经配置过的wifi列表
var len = list.size();
var wifiInfo = this.getNow();
var tSsid = '"' + ssid + '"';
for(var i = 0; i < len; i++) {
var tmp = list.get(i);
var tmpSsid = tmp.plusGetAttribute('SSID');
console.log('removeExsits===>' + tmpSsid);
if(tmpSsid == tSsid) {
console.log('removeExsits===>' + tmpSsid);
this.disConnect(wifiInfo.getNetworkId());
this.wifiManager.removeNetwork(tmp.plusGetAttribute('networkId'));
}
}
}
/**
- 连接已有的wifi 会自动校验
- @param {Object} netWorkId wifi的id
*/
WIFI.prototype.connectOld = function(netWorkId) {
var now = this.getNow();
if(now.getNetworkId() != netWorkId) { //当前连接的不是将要连接的
this.wifiManager.enableNetwork(netWorkId, true);
}
}
/**
- 取消连接
- @param {Object} netWorkId wifi的id
*/
WIFI.prototype.disConnect = function(netWorkId) {
var now = this.getNow();
if(now.getNetworkId() == netWorkId) { //当前连接的是需要取消的 则取消
this.wifiManager.disableNetwork(netWorkId);
this.wifiManager.disconnect();
}
}
/**
- 获取当前连接的wifi
*/
WIFI.prototype.getNow = function() {
return this.wifiManager.getConnectionInfo();
}
/** -
*/
WIFI.prototype.getWifiState = function() {
return this.wifiManager.getWifiState();
}
/**
- 添加新的wifi并连接
- @param {Object} ssid wifi名
-
@param {Object} pwd 密码
*/
WIFI.prototype.connectNew = function(ssid, pwd) {
var WifiConfiguration = this.WifiConfiguration;
var wcf = new WifiConfiguration();wcf.plusGetAttribute('allowedAuthAlgorithms').set(WifiConfiguration.AuthAlgorithm.OPEN);
wcf.plusGetAttribute('allowedGroupCiphers').set(WifiConfiguration.GroupCipher.TKIP);
wcf.plusGetAttribute('allowedKeyManagement').set(WifiConfiguration.KeyMgmt.WPA_PSK);
wcf.plusGetAttribute('allowedPairwiseCiphers').set(WifiConfiguration.PairwiseCipher.TKIP);
wcf.plusGetAttribute('allowedGroupCiphers').set(WifiConfiguration.GroupCipher.CCMP);
wcf.plusGetAttribute('allowedPairwiseCiphers').set(WifiConfiguration.PairwiseCipher.CCMP);wcf.plusSetAttribute('status', WifiConfiguration.Status.ENABLED);
wcf.plusSetAttribute('SSID', '"' + ssid + '"');
wcf.plusSetAttribute('preSharedKey', '"' + pwd + '"');
wcf.plusSetAttribute('hiddenSSID', true);var wcgID = this.wifiManager.addNetwork(wcf);
var b = this.wifiManager.enableNetwork(wcgID, true);
}
/**
- 改变连接的wifi
- @param {Object} index wifi列表的索引
*/
WIFI.prototype.change = function(index) {
// 索引大于配置好的网络索引返回
if(index > this.wifis.size()) {
return;
}
// 连接配置好的指定ID的网络
this.wifiManager.enableNetwork(this.wifis.get(index).plusGetAttribute('networkId'), true);
}
/**
- 获取wifi是否打开
*/
WIFI.prototype.isWifiEnabled = function() {
return this.wifiManager.isWifiEnabled();
}
/**
- 打开wifi
*/
WIFI.prototype.open = function() {
console.log('open函数已执行');
this.wifiManager.setWifiEnabled(true);
}
/**
- 关闭wifi
*/
WIFI.prototype.close = function() {
this.wifiManager.setWifiEnabled(false);
}
/**
- 兼容版的wifi设置 只提供跳转wifi设置界面
*/
window.C_WIFI = function() {
this.main = plus.android.runtimeMainActivity();
var Intent = plus.android.importClass("android.content.Intent");
var Settings = plus.android.importClass('android.provider.Settings');
this.wifiIntent = new Intent(Settings.ACTION_SETTINGS);
}
/** - 跳转wifi界面
*/
C_WIFI.prototype.goWifi = function() {
this.main.startActivity(this.wifiIntent);
}
/*
仅支持android
*/
window.WIFI = function() {
this.init();
}
/**
-
初始化
*/
WIFI.prototype.init = function() {
var Context = plus.android.importClass("android.content.Context");
plus.android.importClass("android.net.wifi.WifiManager");
plus.android.importClass("java.util.List");
plus.android.importClass("java.util.ArrayList");
plus.android.importClass("android.net.wifi.ScanResult");
plus.android.importClass("android.net.wifi.WifiInfo");
plus.android.importClass("java.util.BitSet");this.WifiConfiguration = plus.android.importClass("android.net.wifi.WifiConfiguration");
this.wifiManager = plus.android.runtimeMainActivity().getSystemService(Context.WIFI_SERVICE);
}
/**
- 获取wifi列表
*/
WIFI.prototype.getAllList = function() {
return this.wifis = this.wifiManager.getScanResults();
}
/**
- 校验ssid 返回的是有此ssid的wifi个数
-
@param {Object} ssid wifi名
*/
WIFI.prototype.checkSsid = function(ssid) {
var list = this.wifiManager.getScanResults();
var len = list.size();
var num = 0;
for(var i = 0; i < len; i++) {
var tmp = list.get(i);if(tmp.plusGetAttribute('SSID') == ssid) { console.log('checkSsid === ' + i + '>>' + tmp.plusGetAttribute('SSID')) num++; }
}
return num;
}
/**
- 移除已经存在的ssid
- @param {Object} ssid wifi名
*/
WIFI.prototype.removeExsits = function(ssid) {
var list = this.wifiManager.getConfiguredNetworks(); //获取到已经配置过的wifi列表
var len = list.size();
var wifiInfo = this.getNow();
var tSsid = '"' + ssid + '"';
for(var i = 0; i < len; i++) {
var tmp = list.get(i);
var tmpSsid = tmp.plusGetAttribute('SSID');
console.log('removeExsits===>' + tmpSsid);
if(tmpSsid == tSsid) {
console.log('removeExsits===>' + tmpSsid);
this.disConnect(wifiInfo.getNetworkId());
this.wifiManager.removeNetwork(tmp.plusGetAttribute('networkId'));
}
}
}
/**
- 连接已有的wifi 会自动校验
- @param {Object} netWorkId wifi的id
*/
WIFI.prototype.connectOld = function(netWorkId) {
var now = this.getNow();
if(now.getNetworkId() != netWorkId) { //当前连接的不是将要连接的
this.wifiManager.enableNetwork(netWorkId, true);
}
}
/**
- 取消连接
- @param {Object} netWorkId wifi的id
*/
WIFI.prototype.disConnect = function(netWorkId) {
var now = this.getNow();
if(now.getNetworkId() == netWorkId) { //当前连接的是需要取消的 则取消
this.wifiManager.disableNetwork(netWorkId);
this.wifiManager.disconnect();
}
}
/**
- 获取当前连接的wifi
*/
WIFI.prototype.getNow = function() {
return this.wifiManager.getConnectionInfo();
}
/** -
*/
WIFI.prototype.getWifiState = function() {
return this.wifiManager.getWifiState();
}
/**
- 添加新的wifi并连接
- @param {Object} ssid wifi名
-
@param {Object} pwd 密码
*/
WIFI.prototype.connectNew = function(ssid, pwd) {
var WifiConfiguration = this.WifiConfiguration;
var wcf = new WifiConfiguration();wcf.plusGetAttribute('allowedAuthAlgorithms').set(WifiConfiguration.AuthAlgorithm.OPEN);
wcf.plusGetAttribute('allowedGroupCiphers').set(WifiConfiguration.GroupCipher.TKIP);
wcf.plusGetAttribute('allowedKeyManagement').set(WifiConfiguration.KeyMgmt.WPA_PSK);
wcf.plusGetAttribute('allowedPairwiseCiphers').set(WifiConfiguration.PairwiseCipher.TKIP);
wcf.plusGetAttribute('allowedGroupCiphers').set(WifiConfiguration.GroupCipher.CCMP);
wcf.plusGetAttribute('allowedPairwiseCiphers').set(WifiConfiguration.PairwiseCipher.CCMP);wcf.plusSetAttribute('status', WifiConfiguration.Status.ENABLED);
wcf.plusSetAttribute('SSID', '"' + ssid + '"');
wcf.plusSetAttribute('preSharedKey', '"' + pwd + '"');
wcf.plusSetAttribute('hiddenSSID', true);var wcgID = this.wifiManager.addNetwork(wcf);
var b = this.wifiManager.enableNetwork(wcgID, true);
}
/**
- 改变连接的wifi
- @param {Object} index wifi列表的索引
*/
WIFI.prototype.change = function(index) {
// 索引大于配置好的网络索引返回
if(index > this.wifis.size()) {
return;
}
// 连接配置好的指定ID的网络
this.wifiManager.enableNetwork(this.wifis.get(index).plusGetAttribute('networkId'), true);
}
/**
- 获取wifi是否打开
*/
WIFI.prototype.isWifiEnabled = function() {
return this.wifiManager.isWifiEnabled();
}
/**
- 打开wifi
*/
WIFI.prototype.open = function() {
console.log('open函数已执行');
this.wifiManager.setWifiEnabled(true);
}
/**
- 关闭wifi
*/
WIFI.prototype.close = function() {
this.wifiManager.setWifiEnabled(false);
}
/**
- 兼容版的wifi设置 只提供跳转wifi设置界面
*/
window.C_WIFI = function() {
this.main = plus.android.runtimeMainActivity();
var Intent = plus.android.importClass("android.content.Intent");
var Settings = plus.android.importClass('android.provider.Settings');
this.wifiIntent = new Intent(Settings.ACTION_SETTINGS);
}
/** - 跳转wifi界面
*/
C_WIFI.prototype.goWifi = function() {
this.main.startActivity(this.wifiIntent);
}

微信分享图片,在苹果上无效怎办呀?
同样的代码,
在安桌上是可以正常分享的!
在苹果上就分享不了!
sharewx.send( {pictures:[sd_path],extra:{scene:"WXSceneSession"}}, function(){
plus.nativeUI.alert( "分享成功!" );
}, function(e){
plus.nativeUI.alert( "分享失败!");
});
同样的代码,
在安桌上是可以正常分享的!
在苹果上就分享不了!
sharewx.send( {pictures:[sd_path],extra:{scene:"WXSceneSession"}}, function(){
plus.nativeUI.alert( "分享成功!" );
}, function(e){
plus.nativeUI.alert( "分享失败!");
});

苹果热更新问题,及微信分享问题!!!
今天通过了苹果审核。立即下载软件来测试热更新。
用wgt升级,提示 -1229 | HTML5+ Runtime缺少升级包manifest.json中配置的模块(这里显示了所有模块都缺少)。
同样的在安卓上是没有问题的。打开软件,关闭软件,升级几次后提示文件wgt文件不存在。再服务端把升级文件改名。再升级意处的升级成功了!
后来反复测试,IOS下!大部分时候升级都会提示 Runtime缺少升级包manifest.json中配置的模块(这里显示了所有模块都缺少)。重试的次数多了,就会提示wgt文件不存在,删了软件再重新安装也不行。只能服务端把升级包改名。运气好偶尔可以升级成功。
再碰上一问题,就是微信分享图片,在安卓上没问题,在IOS上分享不了。
今天通过了苹果审核。立即下载软件来测试热更新。
用wgt升级,提示 -1229 | HTML5+ Runtime缺少升级包manifest.json中配置的模块(这里显示了所有模块都缺少)。
同样的在安卓上是没有问题的。打开软件,关闭软件,升级几次后提示文件wgt文件不存在。再服务端把升级文件改名。再升级意处的升级成功了!
后来反复测试,IOS下!大部分时候升级都会提示 Runtime缺少升级包manifest.json中配置的模块(这里显示了所有模块都缺少)。重试的次数多了,就会提示wgt文件不存在,删了软件再重新安装也不行。只能服务端把升级包改名。运气好偶尔可以升级成功。
再碰上一问题,就是微信分享图片,在安卓上没问题,在IOS上分享不了。
收起阅读 »
Native.js示例汇总
官网:
http://ask.dcloud.net.cn/article/114
官网:
http://ask.dcloud.net.cn/article/114

hbuider 卡机问题 解决办法
HBuilder
8.8.0.201706142254
当前版本,我机器配置比较低。win10,系统
hb打开时间长了的话。点击左下角的状态栏,调不出开关机那个状态栏。
今天无意间安装了一下tx的安全管家,竟然不卡了。。。特此通报。
本人懒,打这么多字实属不易。就别挑剔逻辑问题了。看我的东西,主要意会。~~
HBuilder
8.8.0.201706142254
当前版本,我机器配置比较低。win10,系统
hb打开时间长了的话。点击左下角的状态栏,调不出开关机那个状态栏。
今天无意间安装了一下tx的安全管家,竟然不卡了。。。特此通报。
本人懒,打这么多字实属不易。就别挑剔逻辑问题了。看我的东西,主要意会。~~

银联wap支付 经验
使用银联wap支付很简单
见如下代码:
银联结果返回页面
<script type="text/javascript">
var ws;
// H5 plus事件处理
function plusReady() {
ws = plus.webview.currentWebview();
var re_vw = plus.webview.getWebviewById("recharge.html");
re_vw.evalJS('yl_res("<?php echo $_POST ['orderId'];?>")');
ws.close();
}
if(window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
</script>
app需要通知的页面
function yl_res(orderno){
mui.getJSON(api,{act:'recharge_result',orderno:orderno,user_phone:user_phone},function(data){
if(data.data.status==1){
mui.toast("充值成功");
userin("wallet.html");
}
});
}
使用银联wap支付很简单
见如下代码:
银联结果返回页面
<script type="text/javascript">
var ws;
// H5 plus事件处理
function plusReady() {
ws = plus.webview.currentWebview();
var re_vw = plus.webview.getWebviewById("recharge.html");
re_vw.evalJS('yl_res("<?php echo $_POST ['orderId'];?>")');
ws.close();
}
if(window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
</script>
app需要通知的页面
function yl_res(orderno){
mui.getJSON(api,{act:'recharge_result',orderno:orderno,user_phone:user_phone},function(data){
if(data.data.status==1){
mui.toast("充值成功");
userin("wallet.html");
}
});
}
收起阅读 »

基于mui的区域滚动实现swiper在里面滚动的分屏效果
swiper在里面滚动效果演示地址 http://www.swiper.com.cn/demo/99-inner-scroll.html
基于mui的区域滚动组件以及滑动事件实现组件
组件css代码
/分屏切换组件CSS/
.mui-scroll-splitScreen{
position: relative;
overflow: hidden;
}
.mui-scroll-splitScreen-group{
position: relative;
width: 100%;
height: 100%;
transition: all 0.5s;
}
.mui-scroll-splitScreen .mui-scroll-wrapper{
position: relative;
height: 100%;
width: 100%;
}
.mui-scroll-splitScreen .mui-scroll-wrapper .mui-scroll{
padding-bottom: 40px;
min-height: 100%;
}
.mui-scroll-splitScreen .mui-scroll-wrapper .slide-up-msg{
text-align: center;
opacity: 0;
height: 40px;
line-height: 40px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.mui-scroll-splitScreen .mui-scroll-wrapper[swipeupmore=yes] .slide-up-msg{
opacity: 1;
}
.mui-scroll-splitScreen .mui-scroll-wrapper[swipeupmore=yes1] .slide-up-msg{
opacity: 1;
}
/分屏切换组件CSS/
组件JS代码
//分屏切换组件功能代码
function splitScreenSlide(Json){
var _this=this;
var el=Json.el;
var slideUpMsg=Json.slideUpMsg || '上拉显示更多';
var $group=document.querySelector(el+' .mui-scroll-splitScreen-group');
var $wrapper=document.querySelectorAll(el+' .mui-scroll-wrapper');
this.initInsideScroll=function(){
//判断每屏内容是否超出,如果超出不启用滑动两次切屏效果,直接滑动一次切屏
for(var i=0;i<$wrapper.length;i++){
var $scroll=$wrapper[i].getElementsByClassName('mui-scroll')[0];
if($scroll.clientHeight<=$wrapper[i].clientHeight){
console.log(1);
$wrapper[i].setAttribute('swipeupMore','yes1');
$wrapper[i].setAttribute('swipedownMore','yes1');
}else{
$wrapper[i].setAttribute('swipeupMore','no');
$wrapper[i].setAttribute('swipedownMore','no');
}
}
}
this.goToSlideItem=function(index){
//跳转到指定屏,从0开始
$group.style.transform='translateY(-'+index100+'%)';
_this.initInsideScroll();
}
this.restoreEl=function(){
//复原组件
$group.style.transform='translateY(0)';
_this.initInsideScroll();
}
//组件生成代码
for(var i=0;i<$wrapper.length;i++){
//添加提示
var oP=document.createElement('p');
oP.className='slide-up-msg';
if(i==$wrapper.length-1){
$wrapper[i].endWrapper=true;
oP.innerHTML='没有更多内容了!';
}else{
oP.innerHTML=slideUpMsg;
}
$wrapper[i].appendChild(oP);
//添加索引下标
$wrapper[i].index=i;
//添加监听事件
$wrapper[i].addEventListener('swipeup',function(){
var xx=mui(this).scroll();
if(xx.y<=xx.maxScrollY){
if(this.endWrapper==true){
this.setAttribute('swipeupMore','yes');
this.setAttribute('swipedownMore','no');
return false;
}
if(this.getAttribute('swipeupMore')=='yes' || this.getAttribute('swipeupMore')=='yes1'){
if(this.getAttribute('swipeupMore')!='yes1'){
this.setAttribute('swipeupMore','no');
this.setAttribute('swipedownMore','no');
}
var x=(this.index+1)100;
$group.style.transform='translateY(-'+x+'%)';
}else{
this.setAttribute('swipeupMore','yes')
this.setAttribute('swipedownMore','no');
}
}
})
$wrapper[i].addEventListener('swipedown',function(){
var xx=mui(this).scroll();
if(xx.y>=0){
if(this.getAttribute('swipedownMore')=='yes' || this.getAttribute('swipedownMore')=='yes1'){
if(this.getAttribute('swipedownMore')!='yes1'){
this.setAttribute('swipedownMore','no');
this.setAttribute('swipeupMore','no');
}
var x=(this.index-1)*100;
$group.style.transform='translateY(-'+x+'%)';
}else{
this.setAttribute('swipedownMore','yes')
this.setAttribute('swipeupMore','no');
}
}
})
}
this.initInsideScroll();
}
使用方法 HTML代码
<div class="mui-scroll-splitScreen">
<div class="mui-scroll-splitScreen-group">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
第一屏 内容
</div>
</div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
第二屏 内容
</div>
</div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
第三屏 内容
</div>
</div>
</div>
</div>
JS初始化代码
mui.init({
gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:false,//默认为false,不监听
release:false//默认为false,不监听
}
});
mui('.mui-scroll-wrapper').scroll({
indicators:true
});
//实例化组件
var mSplitScreen=new splitScreenSlide({
el:'.mui-scroll-splitScreen'
});
附件有实例代码需要引用mui.css 和mui.js
swiper在里面滚动效果演示地址 http://www.swiper.com.cn/demo/99-inner-scroll.html
基于mui的区域滚动组件以及滑动事件实现组件
组件css代码
/分屏切换组件CSS/
.mui-scroll-splitScreen{
position: relative;
overflow: hidden;
}
.mui-scroll-splitScreen-group{
position: relative;
width: 100%;
height: 100%;
transition: all 0.5s;
}
.mui-scroll-splitScreen .mui-scroll-wrapper{
position: relative;
height: 100%;
width: 100%;
}
.mui-scroll-splitScreen .mui-scroll-wrapper .mui-scroll{
padding-bottom: 40px;
min-height: 100%;
}
.mui-scroll-splitScreen .mui-scroll-wrapper .slide-up-msg{
text-align: center;
opacity: 0;
height: 40px;
line-height: 40px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.mui-scroll-splitScreen .mui-scroll-wrapper[swipeupmore=yes] .slide-up-msg{
opacity: 1;
}
.mui-scroll-splitScreen .mui-scroll-wrapper[swipeupmore=yes1] .slide-up-msg{
opacity: 1;
}
/分屏切换组件CSS/
组件JS代码
//分屏切换组件功能代码
function splitScreenSlide(Json){
var _this=this;
var el=Json.el;
var slideUpMsg=Json.slideUpMsg || '上拉显示更多';
var $group=document.querySelector(el+' .mui-scroll-splitScreen-group');
var $wrapper=document.querySelectorAll(el+' .mui-scroll-wrapper');
this.initInsideScroll=function(){
//判断每屏内容是否超出,如果超出不启用滑动两次切屏效果,直接滑动一次切屏
for(var i=0;i<$wrapper.length;i++){
var $scroll=$wrapper[i].getElementsByClassName('mui-scroll')[0];
if($scroll.clientHeight<=$wrapper[i].clientHeight){
console.log(1);
$wrapper[i].setAttribute('swipeupMore','yes1');
$wrapper[i].setAttribute('swipedownMore','yes1');
}else{
$wrapper[i].setAttribute('swipeupMore','no');
$wrapper[i].setAttribute('swipedownMore','no');
}
}
}
this.goToSlideItem=function(index){
//跳转到指定屏,从0开始
$group.style.transform='translateY(-'+index100+'%)';
_this.initInsideScroll();
}
this.restoreEl=function(){
//复原组件
$group.style.transform='translateY(0)';
_this.initInsideScroll();
}
//组件生成代码
for(var i=0;i<$wrapper.length;i++){
//添加提示
var oP=document.createElement('p');
oP.className='slide-up-msg';
if(i==$wrapper.length-1){
$wrapper[i].endWrapper=true;
oP.innerHTML='没有更多内容了!';
}else{
oP.innerHTML=slideUpMsg;
}
$wrapper[i].appendChild(oP);
//添加索引下标
$wrapper[i].index=i;
//添加监听事件
$wrapper[i].addEventListener('swipeup',function(){
var xx=mui(this).scroll();
if(xx.y<=xx.maxScrollY){
if(this.endWrapper==true){
this.setAttribute('swipeupMore','yes');
this.setAttribute('swipedownMore','no');
return false;
}
if(this.getAttribute('swipeupMore')=='yes' || this.getAttribute('swipeupMore')=='yes1'){
if(this.getAttribute('swipeupMore')!='yes1'){
this.setAttribute('swipeupMore','no');
this.setAttribute('swipedownMore','no');
}
var x=(this.index+1)100;
$group.style.transform='translateY(-'+x+'%)';
}else{
this.setAttribute('swipeupMore','yes')
this.setAttribute('swipedownMore','no');
}
}
})
$wrapper[i].addEventListener('swipedown',function(){
var xx=mui(this).scroll();
if(xx.y>=0){
if(this.getAttribute('swipedownMore')=='yes' || this.getAttribute('swipedownMore')=='yes1'){
if(this.getAttribute('swipedownMore')!='yes1'){
this.setAttribute('swipedownMore','no');
this.setAttribute('swipeupMore','no');
}
var x=(this.index-1)*100;
$group.style.transform='translateY(-'+x+'%)';
}else{
this.setAttribute('swipedownMore','yes')
this.setAttribute('swipeupMore','no');
}
}
})
}
this.initInsideScroll();
}
使用方法 HTML代码
<div class="mui-scroll-splitScreen">
<div class="mui-scroll-splitScreen-group">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
第一屏 内容
</div>
</div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
第二屏 内容
</div>
</div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
第三屏 内容
</div>
</div>
</div>
</div>
JS初始化代码
mui.init({
gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:false,//默认为false,不监听
release:false//默认为false,不监听
}
});
mui('.mui-scroll-wrapper').scroll({
indicators:true
});
//实例化组件
var mSplitScreen=new splitScreenSlide({
el:'.mui-scroll-splitScreen'
});
附件有实例代码需要引用mui.css 和mui.js
收起阅读 »