1.12 ionic3入门——可以滑动的按钮组

我要做一组按钮，他们并排在一列，一次只显示几个，我可以通过左右滑动来选择当前能够看到的按钮。说这好想好难～ 我直接上动图吧

未命名 2.gif

就是这么一个功能，下面直接上代码
（1）html

<ion-header>

  <ion-navbar>
    <ion-title>任务</ion-title>
  </ion-navbar>

</ion-header>


<ion-content >
    <div class="group">

        <!--外层的ion-scroll 100%   里面元素的宽度要大于100%-->
          <ion-scroll scrollX="true">  
  
              <ul class="plist clearfix" [ngStyle]="{'width':bestListWidth}" style="height:40px;margin-top:0px">
                  <li *ngFor="let item of groupList;let i = index" style="height:40px;margin-top:0px">     
                    <div id={{item}} (click)="checked_group(i)" style="height: 40px;width: 100%;line-height: 40px;margin-top:0px">{{item}}</div>
                  </li>
                </ul>
          </ion-scroll>
  
      </div>
</ion-content>

(2) css

.group {
    ion-scroll{
        width: 100%;
        height: 40px;
        overflow-x: auto;
    }
    .plist{
        width:auto;
    }
    text-align: center;
    background-color: rgb(233, 240, 240);
}
.plist{
    list-style: none;
    padding:0rem;
    
    li{
        width: 6.6rem;
        height: 40px;
        float: left;
        margin-right: .6rem;

    }
}

(3) ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the MissionPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-mission',
  templateUrl: 'mission.html',
})
export class MissionPage {
  public groupList = [];
  public bestListWidth=''; /*精品推荐数据长度*/

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    
    this.groupList = ["教师组","第一组","第二组","第三组","第四组","第五组","第六组","第七组","第八组"];
    this.bestListWidth=this.groupList.length*92+'px'; 
    

  }
  init_group(){
    var group_div = document.getElementById(this.groupList[0]);
    group_div.style.backgroundColor="#488aff";
    group_div.style.color="white";
    group_div.style.fontSize="16px";
  }
  checked_group(i){
    this.clear_color();
    var group_div = document.getElementById(this.groupList[i]);
    group_div.style.backgroundColor="#488aff";
    group_div.style.color="white";
    group_div.style.fontSize="16px";

  }
  //让所有组别背景色都变为默认色
  clear_color(){
    for(let i =0;i<this.groupList.length;i++){
      var group_div = document.getElementById(this.groupList[i]);
      group_div.style.backgroundColor="rgb(233, 240, 240)";
      group_div.style.color="black";
      group_div.style.fontSize="14px";
    }
  }
  ionViewWillEnter(){
    this.init_group();
  }

}