我要做一組按鈕匹耕，他們并排在一列聚请，一次只顯示幾個，我可以通過左右滑動來選擇當前能夠看到的按鈕稳其。說這好想好難～ 我直接上動圖吧

未命名 2.gif

就是這么一個功能驶赏，下面直接上代碼
（1）html

<ion-header>

  <ion-navbar>
    <ion-title>任務(wù)</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=''; /*精品推薦數(shù)據(jù)長度*/

  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";

  }
  //讓所有組別背景色都變?yōu)槟J色
  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();
  }

}