Ionic横向滚动样例
1、效果图
2、HTML文件
ionic相关JS和CSS通过CDN引入，example.html内容如下：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
<link rel="stylesheet" href="css/example.css"/>
</head>
<body>
<ion-app>
<ion-content class="ion-padding" color="light">
<ion-slides id="avatars">
<ion-slide>
<span>
<img src="images/avatar.jpg">
</span>
<span>Tom</span>
</ion-slide>
<ion-slide>
<span>
<img src="images/avatar1.jpg">
</span>
<span>Jack</span>
</ion-slide>
<ion-slide>
<span>
<img src="images/avatar2.jpg">
</span>
<span>Anna</span>
</ion-slide>
<ion-slide>
<span>
<img src="images/avatar3.jpg">
</span>
<span>Kelly</span>
</ion-slide>
<ion-slide>
<span>
<img src="images/avatar4.jpg">
</span>
<span>Nancy</span>
</ion-slide>
<ion-slide>
<span>
<img src="images/avatar5.png">
</span>
<span>Locke</span>
</ion-slide>
</ion-slides>
</ion-content>
</ion-app>
</body>
</html>
3、CSS样式
example.css：
#avatars{
padding: 10px 0;
background-color: #FFF;
}
#avatars img{
width: 50px;
height: 50px;
border-radius: 50px;
}
#avatars span{
font-size: 12px;
}
#avatars ion-slide {
float: left;
flex-direction: column;
width: 90px!important;
margin-left: 1.5px!important;
margin-right: 1.5px!important;
}