【移动web】vue+mui 项目使用记录

记录项目中遇到的各种坑。

1、mui下拉刷新问题。

    mounted() {
        let that = this;
        this.mui.init({
            pullRefresh: {
                container: ".list", //下拉刷新容器标识
                down: {
                    style: "circle", //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                    color: "#2BD009", //可选，默认“#2BD009” 下拉刷新控件颜色
                    // height: "50px", //可选,默认50px.下拉刷新控件的高度,
                    range: "100px", //可选 默认100px,控件可下拉拖拽的范围
                    offset: "0px", //可选 默认0px,下拉刷新控件的起始位置
                    auto: true, //可选,默认false.首次加载自动上拉刷新一次
                    callback: that.refreshData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                }
            }
        });
    },

初始化的时候不要设置height属性值，否则只会在首次加载会触发回调。后面下拉就不会触发回调。

2、mui在切换路由后，无法触发mui.init初始化。

例如下拉刷新，从别的页面切换回来，不能正常初始化。

• 解决方法：init前加以下代码。

for (var i = this.mui.hooks.inits.length - 1, item; i >= 0; i--) {
                item = this.mui.hooks.inits[i];
                if (item.name == "pullrefresh") {
                    item.repeat = true;
                }
            }

beforeDestroy() {
        this.mui.options.pullRefresh=null;
    }

• 结束刷新

//结束下拉刷新
this.mui(".list")
    .pullRefresh()
    .endPulldownToRefresh();
// 重置刷新
this.mui(".list")
    .pullRefresh()
    .refresh(true);

3.预览图片

<script src="https://cdn.bootcss.com/mui/3.7.1/js/mui.min.js"></script>
<script src="./static/mui/js/mui.zoom.js"></script>
<script src="./static/mui/js/mui.previewimage.js"></script>

app.vue中初始化

mounted() {
    this.mui.previewImage(); // 大图预览初始化
}

使用：
data-preview-src： 不填默认使用src的值。
data-preview-group=“7”： 值相同的是一组预览。

<img
   class="img"
   v-for="(v,i) in imgArr"
   :key="i+10"
   :src="v.filePath"
   data-preview-src
   data-preview-group="7"
/>

4、轮播图

轮播图滑动不了：
之前在mounted中初始化，可以使用，后来突然滑动不了。解决：
在updated中初始化。

updated(){
    this.mui('.mui-slider').slider({interval: 3000});
}

我要做一个预览大图带删除操作的功能。
我的应用中后来遇到一个bug， 滑动到最后一个，隐藏轮播图；再次打开一划就滑到最后一张图。
解决办法： 控制轮播图显示隐藏的使用v-if而非v-show。解决。

<!-- 预览大图带删除（门头、商铺）showSlider -->
<div class="previeSlider"
    v-if="showSlider && sliderGroup.length">
    <div class="sliderTop">
        <div class="sliderTip">{{index}}/{{sliderGroup.length}}</div>
        <div class="delete"
            @tap="deleteImg(sliderGroup,sliderArr,index -1);"></div>
    </div>
    <div class="mui-slider"
        @tap="showSlider = false;">
        <div class="mui-slider-group">
            <div class="mui-slider-item"
                v-for="(item, i) in sliderGroup"
                :key="i">
                <div class="myImg">
                    <img :src="item.src? item.src: item" />
                </div>
            </div>
        </div>
    </div>
</div>

5、上拉加载+区域滚动

https://ask.dcloud.net.cn/question/24967
出现两个滚动条。
解决办法：indicators:false 区域滚动不显示滚动条。

this.mui(".mui-scroll-wrapper").scroll({
    indicators:false,
    deceleration: 0.0006 //flick 减速系数
});

6、手动触发上拉加载

this.mui(".mui-scroll-wrapper").pullRefresh().pullupLoading();