[Tutoria] listIndex with no list-group-title

thank you for 2.2.0

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="title">List Index</div>
      </div>
    </div>
    <div class="list-index"></div>
    <div class="page-content">
      <div class="list simple-list">
        <ul>
          {{#list}}
          <li><span>{{this}}</span></li>
          {{/list}}
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  return{
    data:function(){
      return {
        list:(
          'Aaron Adam Aiden Albert Alex Alexander Alfie Archie Arthur Austin'+
          'Benjamin Blake Bobby Caleb Callum Cameron Charles Charlie Connor'+
          'Daniel David Dexter Dylan Edward Elijah Elliot Elliott Ethan Evan'+
          'Felix Finlay Finley Frankie Freddie Frederick Gabriel George'+
          'Harley Harrison Harry Harvey Henry Hugo Ibrahim Isaac'+
          'Jack Jacob Jake James Jamie Jayden Jenson Joseph Joshua Jude'+
          'Kai Kian Leo Leon Lewis Liam Logan Louie Louis Luca Lucas Luke'+
          'Mason Matthew Max Michael Mohammad Mohammed Muhammad Nathan Noah'+
          'Oliver Ollie Oscar Owen Reuben Riley Robert Ronnie Rory Ryan'+
          'Samuel Sebastian Seth Sonny Stanley Teddy Theo Theodore Thomas'+
          'Toby Tommy Tyler William Zachary'
        ).split(' ')
      };
    },
    methods:{
      getIndexes:function(list){
         return list.map(function(v){return v.charAt(0).toUpperCase()})
          .filter(function(v,i,t){return t.indexOf(v)===i});
      },
      doSelect:function(l,k,i){
        var els=l.$listEl.find('li');
        for(var i=0;i<els.length;i++){
          if(Dom7(els[i]).text().charAt(0).toUpperCase()==k){
            l.$pageContentEl.scrollTop(
              (Dom7(els[i]).offset().top+l.$pageContentEl[0].scrollTop)-
              parseInt(l.$pageContentEl.css('padding-top'),10)
            );
            break;
          }
        }
      }
    },
    on:{
      pageBeforeRemove(e,page){
        this.listIndex.destroy();
      },
      pageInit:function(e,page){
        var self=this;
        self.listIndex=app.listIndex.create({
          listEl:self.$el.find('.list'),
          el:self.$el.find('.list-index'),
          indexes:self.getIndexes(self.list),
          scrollList:false,
          label:true,
          on:{
            select:function(l,k,i){
              self.doSelect(l,k,i);
            }
          }              
        });
      }
    }
  }
</script>
1 Like

Looks great, thanks!