HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

mui中美丽的popover

mui

新手 在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

WIFI Native.JS

/*
仅支持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( "分享失败!");
});

收起阅读 »

DCloud开源项目集锦

HBuilder

https://github.com/dcloudio/casecode

https://github.com/dcloudio/casecode

苹果热更新问题,及微信分享问题!!!

今天通过了苹果审核。立即下载软件来测试热更新。

用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示例汇总

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

只有打包后 安装 才能体现启动页改变
如果只是手机调试运行 启动页确实没有改变

只有打包后 安装 才能体现启动页改变
如果只是手机调试运行 启动页确实没有改变

基于mui的区域滚动实现swiper在里面滚动的分屏效果

区域滚动 mui

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

收起阅读 »