0- mui轮播方法

//重要的事情说一遍：若轮播组件内容为js动态生成时（比如通过ajax动态获取的营销信息），
//则需要在动态生成完整DOM后，手动调用图片轮播的初始化方法。
 
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});
 
//切换到指定轮播
gallery.slider().gotoItem(1); //切换至第二个轮播
 
//当前所处轮播位置的索引
gallery.slider().getSlideNumber();
 
//上一个轮播
gallery.slider().prevItem();
 
//下一个轮播
gallery.slider().nextItem();
 
//左右滑动获取当前轮播位置索引
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
  //注意slideNumber是从0开始的；
    var index = event.detail.slideNumber;
   console.info(index)
});

mui('.mui-scroll-wrapper#scrollMain').scroll().scrollTo(0, 0, 0); //100毫秒滚动到顶

如果有多个.mui-scroll-wrappe时候, 得单独定义一个标识, 否则会报错

1- 横向滚动报错

 * { touch-action: pan-y; } 
 使用全局样式样式去掉

<div class="translate_l mui-scroll-wrapper  mui-segmented-control mui-segmented-control-inverted">
    <div class="mui-scroll">
        <div class="swiper-slide">
            <a class="mui-control-item home active" href="/">
                <span>首页</span>
                <i class="line"></i>
            </a>
        </div>
        <div class="swiper-slide">
            <a class="mui-control-item transaction active" href="/transaction">
                <span>环评办理</span>
                <i class="line"></i>
            </a>
        </div>
    </div>
</div>

2- MUI-之-页面传值中的坑与解决办法

页面传值5种方法:

1.如果页面没有被创建可以使用打开页面时的扩展参数传值过去.

A页面 ---- mui.openWindow({ url: 'detail.html', id: 'accuracydetail', extras:{//扩展参数 id:'我是传的值' //k-v } }} B页面--- var wv = plus.webview.currentWebview();//当前页面的窗口对象 var id = wv.id;

2.如果页面被创建了，使用第一种方法传值会失效.这里讲evalJS传值(只支持string)

A页面---- var list = plus.webview.getWebviewById('页面Id');//接收参数的窗口对象 list.evalJS('getData(''+JSON.stringify(Data)+'')');//自定义函数getData() B页面---- function getData(data){ console.log('收到来自A页面传递的数据：'+data); var dataObj = JSON.parse(data); }

3.使用自定义事件传值mui.fire('web窗口Id','事件名','数据Json')

A页面 ---- var list = plus.webview.getWebviewById('页面Id');//接收参数的页面 mui.fire('web窗口Id','事件名A','数据Json') B页面--- document.addEventListener('事件名A', function(event) { console.log(event.detail.数据Json里的字段) });

4.利用缓存传参数

分为H5的localStorage、sessionStorage 和 mui api的plus.storage.setItem('键值', ObjStr) plus.storage.getItem('键值')

5.url传参

坑: 1.webview必须触发loaded事件后，才能执行evalJS或mui.fire方法 webview.addEventListener('loaded',function () { console.log(1221); webview.evalJS("test()"); mui.fire(webview, 'pageShow', {}); }) 2.页面被创建了后用第二种方法传值会失败(概率性很大99%)

3- 遮罩组件使用

var mask = mui.createMask();//callback为用户点击蒙版时自动执行的回调；

mask.show(); //显示遮罩
mask.close(); //关闭遮罩

4- ajax请求错误

$.ajax({
      type: "post",
      url: "/assist/create",
      data: JSON.stringify({
        entity
      }),
      contentType: 'application/json;charset=utf-8',
      success: function (res) {}
})

1. data数据必须给转换成Json字符串, JSON.stringify()方法
2. 必须设置contentType.  contentType: 'application/json;charset=utf-8',

5- 获取地址栏参数

function getSearch() {
    var search = location.search; //获取参数
    search = decodeURI(search); //解码成中文
    search = search.slice(1); //去掉?
    var arr = search.split("&"); //转成数组
    //遍历数组
    var obj = {};
    arr.forEach(function (item) {
        var k = item.split("=")[0];
        var v = item.split("=")[1];
        obj[k] = v;
    });
    //返回
    return obj;
}

取数据:
	var obj = getSearch();
    var newsCode = obj.newsCode;
    var newsType = obj.newsType;

6- template过滤事件

// 过滤时间
  template.defaults.imports.timestamp = function (value) {
    return timestampToTime(value);
  };
  
// 过滤时间函数
function timestampToTime(val) {
    var date = new Date(val);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    Y = date.getFullYear() + '-';
    M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    D = date.getDate() + ' ';
    // h = date.getHours() + ':';
    // m = date.getMinutes() + ':';
    // s = date.getSeconds();
    // return Y + M + D + h + m + s;
    return Y + M + D;
  };

7- 使用上拉加载和下拉刷新方法导致整个页面非定位元素点击事件失效

// 页面加了上拉加载和下拉刷新后所有的非定位元素的click事件全部失效
mui('body').on('tap', '.toDetails1', function () {
    window.top.location.href = this.href;
});
mui('body').on('tap', '.toDetails2', function () {
    window.top.location.href = this.href;
});
mui("body").on("tap", ".home", function () {
    window.top.location.href = this.href;
})
// this.href 可以获取到当前元素的href值
//  window.top.location.href 是最外层的页面跳转

8- 给tabs页签加上一个滑动的效果

原理是用的轮播图的效果来实现的,

<div class="mui-content information">
    <div id="slider" class="mui-slider tabsHeight mui-fullscreen">
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="titleList">
                <a id="itemmobile1" class="itemmobile1 tabsTitle mui-control-item paddingNone mui-active" href="#item1mobile" data-id="0">
                    环评资讯
                </a>
                <a id="itemmobile2" class="itemmobile2 tabsTitle mui-control-item paddingNone" href="#item2mobile" data-id="1">
                    环评知识
                </a>
            </div>
        </div>

        <div class="mui-slider-group informaTabs" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div class="mui-scroll-wrapper" data-scroll="1">
                    <div class="mui-scroll" data-pulltorefresh="9" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
                        <ul class="mui-table-view ul_tap1">
                            <!-- 坑 -->
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div id="scroll2" class="mui-scroll-wrapper" data-scroll="2">
                    <div class="mui-scroll" data-pulltorefresh="9" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
                        <ul class="mui-table-view ul_tap2">
                            <!-- 坑2 -->
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

9- 动态赋予高度

因为这个轮播组件刚开始是没有高度的, 需要动态赋予它高度, 其实如果不用这个滑动功能, 是不会出现这种bug的

// 得到每次请求的start,和数组的length, 这样就能计算出总共的li的长度
var start = res.result.start;
var lis_length = res.result.data.length;
var lis_number = parseInt(start / lis_length) + 1;
var result = res.result;
$(".ul_tap1").append(template("tpl1", result));
getHeight(lis_number, lis_length); // 获取mui-content页签内容的高度

// 获取高度并且赋值
function getHeight(lis_number, lis_length) {
  var li_height = 113; // 固定li的高度为 113px
  var lis_length = lis_number * lis_length; // 所有的li的个数

  // ----- 保留代码 -----
  // var lis_length = document.querySelectorAll(".mui-table-view.ul_active li");
  // var li_height = parseInt(window.getComputedStyle(lis[0], null).height);
  // ----- 保留代码 -----

  // +40 是加tabs标题的高度
  var heights = li_height * lis_length + 40 + 'px';
  $(".mui-content.information").css("height", heights);
}
// 我是固定了li的高度, 然后在动态获取的数据中得到每次的start和数组的length,这样就得到的是 

10- 将轮播图直接第二页展示

var gallery = mui('.mui-slider'); // 获得slider插件对象
gallery.slider().gotoItem(0); //切换至第一个轮播
gallery.slider().gotoItem(1); //切换至第二个轮播

11- 上拉加载

up: {
    height: 200, // 可选.默认50.触发上拉加载拖动距离
    auto: true, // 默认为false, 自动上拉加载一次
    contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
    contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
    callback: function () {
        var id = $(".tabsTitle.mui-active")[0].id;
    	renderFirst(fn());
    }
}
// 精髓在于: renderFirst调用一个函数方法过去, 然后这个callback(res)直接调用

12- 滑动到顶部

mui('.mui-scroll-wrapper#scrollMain').scroll().scrollTo(0, 0, 0); //100毫秒滚动到顶

13- 滑动到其他tabs滚动条的问题

1- 直接执行代码置顶, 效果也确实置顶了, 但是出现了滚动条还在下面, 一滑动页面会立刻到最下面去

mui('.mui-scroll-wrapper#scrollMain').scroll().scrollTo(0, 0, 0); //100毫秒滚动到顶

2- 使用重新执行上拉加载一次再置顶, 效果也确实置顶了, 但是出现了滚动条还在下面, 一滑动页面会立刻到最下面去

mui('#scrollMain').pullRefresh().pullupLoading(); // 重新执行上拉加载一次
mui('.mui-scroll-wrapper#scrollMain').scroll().scrollTo(0, 0, 0); //100毫秒滚动到顶

3- 使用下拉刷新方法, 滑动之后启动下拉刷新方法, 效果确实达到了, 但是第二个tabs会无限执行下拉方法,

mui('#scrollMain').pullRefresh().pulldownLoading();

4- 使用启动下拉刷新方法后马上结束下拉刷新, 完美解决

mui('#scrollMain').pullRefresh().pulldownLoading();
mui('#scrollMain').pullRefresh().endPulldownToRefresh();

14- 当没有数据的时候应该结束上拉加载

有个bug: 一排代码一定要在二排代码前, 否则没有数据, 还会再重置上拉加载一起就报错了

一. mui('#scrollMain').pullRefresh().refresh(true)
二. mui('#scrollMain').pullRefresh().endPullupToRefresh(res.result.data.length < 10);

15- 留个问题

之前没有调用下拉刷新方法前 高度一直存在问题, 虽然使用很多方法让高度变为0, 但最后因为执行轮播效果, 滑动之后高度其实一直都存在, 所以轮播组件里的高度是不好控制的, 不知道哪位高手是可以控制呢

16- 在写了上拉加载和下拉刷新之后, 所有的点击事件全部无效了, 包括a标签

我只写了两个, 其实是所有的非定位元素点击事件全部失效的, 等一个个写才行

mui('body').on('tap', '.toDetails1', function () {
    window.top.location.href = this.href;
});
mui('body').on('tap', '.toDetails2', function () {
    window.top.location.href = this.href;
});

17- 轮播图组件

图片要多放2个图片 第一张是最后一张 最后一张是第一张 第一张和最后一张要添加mui-slider-item-duplicate 类名

<div class="mui-slider lunbo">
    <!-- 图片 -->
    <div class="mui-slider-group mui-slider-loop">
        <div class="mui-slider-item-duplicate mui-slider-item">
            <a href="#">
                <img class="img_banner" src="./images/carousel_003.jpg" />
            </a>
        </div>
        <div class="mui-slider-item">
            <a href="#">
                <img class="img_banner" src="./images/carousel_001.jpg" />
            </a>
        </div>
        <div class="mui-slider-item">
            <a href="#">
                <img class="img_banner" src="./images/carousel_002.jpg" />
            </a>
        </div>
        <div class="mui-slider-item">
            <a href="#">
                <img class="img_banner" src="./images/carousel_003.jpg" />
            </a>
        </div>
        <div class="mui-slider-item-duplicate mui-slider-item">
            <a href="#">
                <img class="img_banner" src="./images/carousel_001.jpg" />
            </a>
        </div>
    </div>

    <!-- 小圆点 -->
    <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
    </div>
</div>