tab-dash.html
~~~
<ion-view view-title="Dashboard">
<ion-content class="padding articles">
<div class="box" ng-click="goToArticleDetail(1)">
<div class="img">
<img src="img/1.jpeg">
</div>
<div class="text item">
<h2>性格溫柔的冰糖</h2>
<p>說起冰糖來，實在是讓人又愛又恨，愛是因為這娃性格太好，看到你進來就各種抱大腿</p>
</div>
</div>
<div class="box">
<div class="img">
<img src="img/1.jpeg">
</div>
<div class="text item">
<h2>性格溫柔的冰糖</h2>
<p>說起冰糖來，實在是讓人又愛又恨，愛是因為這娃性格太好，看到你進來就各種抱大腿</p>
</div>
</div>
<div class="box">
<div class="img">
<img src="img/1.jpeg">
</div>
<div class="text item">
<h2>性格溫柔的冰糖</h2>
<p>說起冰糖來，實在是讓人又愛又恨，愛是因為這娃性格太好，看到你進來就各種抱大腿</p>
</div>
</div>
<div class="box">
<div class="img">
<img src="img/1.jpeg">
</div>
<div class="text item">
<h2>性格溫柔的冰糖</h2>
<p>說起冰糖來，實在是讓人又愛又恨，愛是因為這娃性格太好，看到你進來就各種抱大腿</p>
</div>
</div>
</ion-content>
</ion-view>
~~~
style.css樣式
~~~
/* 文章列表 */
.articles{
background: rgb(180, 203, 218);
}
.articles .box{
border-radius: 10px;
overflow: hidden;
margin-top: 10px;
}
.articles .box .img{
height: 200px;
overflow: hidden;
}
.articles .box .img img{
width: 100%;
height: 100%;
}
.articles .box .text{
background: rgb(255,255,255);
}
/* 文章列表 */
~~~
controllers.js
~~~
.controller('DashCtrl', function($scope, $state) {
// 跳轉到文章詳情頁面
$scope.goToArticleDetail = function(id) {
$state.go('tab.article-detail', { id: id })
}
})
~~~