mpvue iview-webapp框架的一些坑

iview 框架 index 组件在ios 中由于层级关系字母索引被挡住问题

框架代码修改

<view class="i-index i-class">
    <scroll-view 
        scroll-y 
        style="overflow: visible;"
        style="{{parse.setScrollStyle(height)}}" 
        bindscroll="handlerScroll"
        scroll-top="{{scrollTop}}">
        <slot></slot>
        <view class="i-index-tooltip" style="{{ isTouches ? 'display:block' : 'display:none' }}">{{currentName}}</view>
    </scroll-view>
     <view class="i-index-fixed" 
        catchtouchstart="handlerTouchMove" 
        catchtouchmove="handlerTouchMove" 
        catchtouchend="handlerTouchEnd">
        <view class="i-index-fixed-item" 
            wx:for="{{fixedData}}" 
            wx:key="{{index}}" 
            data-index="{{index}}" 
            catchtap="handlerFixedTap">
            {{item}}
        </view>
    </view>  
   
</view>
<wxs module="parse">
    module.exports = {
       setScrollStyle : function(height){
           var units = ['%','px','rem','rpx','em','rem'];
           var hasUnits = false;
           for( var i = 0; i < units.length;i++ ){
               var u = units[i];
               if( height.indexOf( u ) > -1 ){
                   hasUnits = true;
                   break;
               }
           }
           return 'height:'+ ( hasUnits ? height : height+'px' )+';overflow: visible';
       }
    }
</wxs>

Component({
    externalClasses: ['i-class'],
    properties : {
        height : {
            type : String,
            value : '300'
        },
        itemHeight : {
            type : Number,
            value : 18
        },
        scrollTop:{
            type : Number,
            value : 0
        }
    },
    relations : {
        '../index-item/index' : {
            type : 'child',
            linked(){
                this.setData({
                    fixedData : []
                })
                this._updateDataChange();
            },
            linkChanged () {
                this._updateDataChange();
            },
            unlinked () {
                this.setData({
                    fixedData : []
                })
                this._updateDataChange();
            }
        }
    },
    data : {
        scrollTop : 0,
        fixedData : [],
        current : 0,
        timer : null,
        startTop : 0,
        itemLength : 0,
        currentName : '',
        isTouches : false
    },
    methods : {
        loop(){},
        _updateDataChange( ){
            
            const indexItems = this.getRelationNodes('../index-item/index');
            const len = indexItems.length;
            const fixedData = this.data.fixedData;
            
            /*
             * 使用函数节流限制重复去设置数组内容进而限制多次重复渲染
             * 暂时没有研究微信在渲染的时候是否会进行函数节流
            */
            if (len > 0) {

                if( this.data.timer ){
                    clearTimeout( this.data.timer )
                    this.setData({
                        timer : null
                    })
                }
                
                this.data.timer = setTimeout(()=>{
                    const data = [];
                    indexItems.forEach((item) => {
                        if( item.data.name && fixedData.indexOf( item.data.name ) === -1 ){
                            data.push(item.data.name);
                            item.updateDataChange();
                        }
                    })
                    this.setData({
                        scrollTop:0,
                        fixedData : data,
                        itemLength : indexItems.length
                    })
                    //组件加载完成之后重新设置顶部高度
                    this.setTouchStartVal();
                },0);
                this.setData({
                    timer : this.data.timer
                })
                
            }
        },
        handlerScroll(event){
            const detail = event.detail;
            
            const scrollTop = detail.scrollTop;
            
            const indexItems = this.getRelationNodes('../index-item/index');
            indexItems.forEach((item,index)=>{
                let data = item.data;
                let offset = data.top + data.height;
               
                if( scrollTop < offset && scrollTop >= data.top ){
                    
                    this.setData({
                        current : index,
                        currentName : data.currentName
                    })
                }
            })
        },
        getCurrentItem(index){
            const indexItems = this.getRelationNodes('../index-item/index');
            let result = {};
            if(indexItems[index-1]){
                result = indexItems[index-1].data;
                result.total = indexItems.length;
                return result;
            }
            
        },
        triggerCallback(options){
            this.triggerEvent('change',options)
        },
        handlerFixedTap(event){
            const eindex = event.currentTarget.dataset.index;
            const item = this.getCurrentItem(eindex);
            
            this.setData({
                scrollTop : item.top - data.scrollTop,
                currentName : item.currentName,
                isTouches : true
            })
            
            this.triggerCallback({
                index : eindex,
                current : item.currentName
            })
        },
        handlerTouchMove(event){
            const data = this.data;
            const touches = event.touches[0] || {};
            const pageY = touches.pageY;
            const rest = pageY - data.startTop;
            let index = Math.ceil( rest/data.itemHeight );
            index = index >= data.itemLength ? data.itemLength -1 : index;
            const movePosition = this.getCurrentItem(index);

           /*
            * 当touch选中的元素和当前currentName不相等的时候才震动一下
            * 微信震动事件
           */
            if(!movePosition){
                return false;
            }
            if( movePosition.name !== this.data.currentName ){
                wx.vibrateShort();
            }
            this.setData({
                scrollTop : movePosition.top,
                currentName : movePosition.name,
                isTouches : true
            })

            this.triggerCallback({
                index : index,
                current : movePosition.name
            })
        },
        handlerTouchEnd(){
            this.setData({
                isTouches : false
            })
        },
        setTouchStartVal(){
            
            const className = '.i-index-fixed';
            const query = wx.createSelectorQuery().in(this);
            query.select( className ).boundingClientRect((res)=>{
                console.log(res)
                if(res&&res.top){
                    this.setData({
                        startTop : res?res.top:0
                    })
                }
                
            }).exec()
        }
    }
})

页面代码

<template>
    <div class="container">
        <div class="containerTop">
            <div class="search">
                <div :class="isInput?'search-left col-8':'search-left'">
                    <i-icon type="search" i-class="icon-b" size="24" />
                    <i-input i-class="input-b" 
                        @focus="focus" 
                        maxlength="10000" 
                        :value="value" 
                        type="text" 
                        @change="getChange" 
                        placeholder="搜索目的地" />
                </div>
                <div v-show="isInput" class="search-right" @click="isInput=false">取消</div>
            </div>
            <div class="tabs">
                <i-tabs :current="current" @change="tabsSelect" color="#19be6b">
                    <i-tab key="1" title="国内" i-class="tab"></i-tab>
                    <i-tab key="2" title="海外" i-class="tab"></i-tab>
                </i-tabs>
            </div>
            <!--热门城市-->
            <div class="hot" v-show="!isInput">
                <div class="title">热门城市</div>
                <i-row>
                    <i-col span="8" v-for="(item,index) in hotList" v-if="index<12" :key="index">
                        <div class="x-btn" @click="setSite(item,'nameChn')">{{item.nameChn}}</div>
                    </i-col>
                </i-row>
            </div>
        <!--索引index组件-->
            <div class="view" v-show="!isInput">
                <i-index height="100%" v-if="siteList&&current==1" :scrollTop="scrollTop">
                    <i-index-item
                        v-for="(item,index) in siteList" :key="index"
                        :name="item.key">
                        <div class="i-index-demo-item" @click="setSite(item1,'name')"  v-for="(item1,inx) in item.list" :key="inx">
                            {{item1.name}}
                        </div>
                    </i-index-item>
                </i-index>
                <i-index height="100%" v-if="siteList&&current==2" :scrollTop="scrollTop">
                    <i-index-item
                        v-for="(item,index) in siteList" :key="index"
                        :name="item.key">
                        <div class="i-index-demo-item" @click="setSite(item1,'name')"  v-for="(item1,inx) in item.list" :key="inx">
                            {{item1.name}}
                        </div>
                    </i-index-item>
                </i-index>
            </div>
        </div>
        <!--搜索列表-->
        <div class="search-list" v-show="isInput">
            <i-cell-group v-for="(item,index) in searchList" :key="index">
                <i-cell 
                    is-link
                    :title="item.nameChn" 
                    i-class="bor-b" 
                    @click="setSite(item,'nameChn')">
                </i-cell>
            </i-cell-group>
        </div>
    </div>
</template>
<script>
    import { mapActions, mapState} from "vuex";
    export default{
        components:{
            
        },
        async onShow(){
            if(this.site.nation=="中国"){
                this.init(this.siteInlandList);
                this.current = 1;
            }else{
                this.init(this.siteForeignList);
                this.current = 2;
            }
        },
        computed:{
            ...mapState({
                siteInlandList:state=>state.siteList,
                siteForeignList:state=>state.siteForeignList,
                site:state=>state.site
            })
        },
        data(){
            return {
                current:1,
                scrollTop:0,//index索引距离顶部距离高度
                value:"",
                siteList:null,
                isInput:false,//是否获取到焦点
                hotList:[],
                searchList:[]
            }
        },
        methods:{
            //选项卡切换
            tabsSelect(obj){
                this.current = obj.mp.detail.key ;
                if(this.current==1){
                    this.init(this.siteInlandList);
                }else{
                    this.init(this.siteForeignList);
                }
            },
            focus(){
                this.isInput = true;
                this.search();
            },
            getChange(value){
                this.value = value.mp.detail.detail.value;
                this.search();
            },
            //点击搜索列表
            setSite(item,filed){
                var data = {
                    city:item[filed],
                    ...item,
                    showCon:true
                };
                if(this.current==1){
                    data.nation = "中国";
                }else{
                    data.nation = "海外";
                }
                
                this.isInput = false ;
                this.$store.commit("SET_SITE",data);
                wx.navigateBack();
            },
            //搜索列表
            search(){
                this.searchList = this.hotList.filter((e)=>{
                    return e.nameChn.indexOf(this.value)>-1||this.value.indexOf(e.nameChn)>-1;
                })
            },
            init(data){
                this.siteList = null;
                this.searchList = [];
                this.value = this.$store.state.site.city;
                this.hotList = data;
                this.searchList = data;
                //设置
                var cities = data;
                //const words = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
                let wordsList = [];
                cities.forEach((item)=>{
                    wordsList.push(item.nameEng.substring(0,1));
                })
                var words = wordsList.filter((e,i,slef)=>{
                    return slef.indexOf(e)==i
                })
                words = words.sort(function compareFunction(param1, param2) {
                        return param1.localeCompare(param2,"zh");
                    }
                )
                let storeCity = new Array(words.length);
                words.forEach((item,index)=>{
                    storeCity[index] = {
                        key : item,
                        list : []
                    }
                })
                
                cities.forEach((item)=>{
                    let firstName = item.nameEng.substring(0,1);
                    let index = words.indexOf(firstName);
                    storeCity[index].list.push({
                        name : item.nameChn,
                        key : firstName,
                        cityId:item.cityId,
                        countryId:item.countryId,
                        nameEng:item.nameEng,
                    });
                })
                this.siteList = [];
                this.siteList = storeCity;
            }
        },
        onLoad(){
            var than = this ;
            wx.getSystemInfo({
                success:function(res){
                    than.scrollTop = parseInt((res.screenWidth/750)*680);
                }
            })
        }
        
    }
</script>
<style lang="css">
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }
    view{
        overflow: visible;
    }
    .tab{
        padding: 0 20rpx;
    }
    /*搜索*/
    .search{
        width: 674rpx;
        margin: 0 auto;
        height: 70rpx;
        overflow: hidden;
    }
    .search-left{
        overflow: hidden;
        border-radius: 14rpx;
        width: 100%;
        background: #f8faf9;
        padding-left: 16rpx;
        float: left;
        position: relative;
    }
    .containerTop{
        height: 680rpx;
    }
    .col-8{
        width: 80%;
    }
    .search-left .icon-b{
        color: #07c687;
        display: inline-block;
        vertical-align: middle;
    }
    .search-left .input-b{
        padding: 0;
        padding: 0;
        display:inline-block;
        vertical-align: middle;
        background: none;
        width: 80%;
    }
    .search-right{
        float: left;
        font-size: 28rpx;
        color: #ccc;
        line-height: 70rpx;
        padding-left: 20rpx;
    }
    /*下划线*/
    .bor-b{
        border-bottom:2rpx solid #ccc ;
    }
    .search-list{
        width: 674rpx;
        margin: 0 auto;
        position: absolute;
        left: 38rpx;
        top: 70rpx;
        bottom: 0;
        overflow: auto;
    }
    .hot{
        width: 674rpx;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }
    .hot .title{
        font-size: 30rpx;
        color: #222;
        line-height: 30rpx;
        padding-top: 30rpx;
        margin-bottom: 10rpx;
    }
    .hot .x-btn{
        height: 60rpx;
        line-height: 60rpx;
        margin: 12rpx 20rpx;
        text-align: center;
        background: #fafafa;
        border: 2rpx solid #ddd;
        font-size: 28rpx;
        color: #222;
    }
    /*索引*/
    .view{
        width: 100%;
        position: absolute;
        top:680rpx;
        bottom: 0;
        z-index: 1000;
    }
    .i-index-demo-item{
        padding: 20rpx;
        border-bottom: 2rpx solid #ccc;
    }
</style>
image.png

image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
禁止转载，如需转载请通过简信或评论联系作者。
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,684评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,143评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,214评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,788评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,796评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,665评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,027评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,679评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,346评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1赞 331
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,412评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,015评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2赞 343