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

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

未命名 2.gif

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

  
    任务
  





    


        
            
  
              

                  
     
                    
{{item}}
                  
                
          
  
      

(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