前端小白的uni-app艰难学习之路
实现
首先是效果图
下面是布局代码:
<view class="bookshelf">
<view class="title">
<text>在读</text>
<text class="icon icon-next fr"></text>
<text class="fr">全部{{bookshelf.count}}本</text>
</view>
<scroll-view scroll-x="true" class="bookshelf-content">
<block v-for="(item, index) in bookshelf.novel" :key="index">
<view class="item" @tap="goDetail(item.id)">
<view class="img">
<image :src="imgUrl(item.pic)" mode=""></image>
</view>
<text class="item-title text-over-1">{{item.title}}</text>
</view>
</block>
</scroll-view>
</view>
注意!这里的block非常关键,去掉就不能在一行显示了
接下来是css代码:
.bookshelf {
margin-top: 540upx;
.bookshelf-content {
white-space: nowrap; // 滚动必须加的属性
width: 100%;
height: 280upx;
padding: 20upx;
margin: 0 auto;
.item {
width: 24%;
margin-right: 20upx;
display: inline-block;
vertical-align: top;
.img {
display: inline-block;
image {
width: 170upx;
height: 220upx;
border-radius: 6upx;
}
}
.item-title {
display: block; // 让字体换行
width: 90%;
font-size: 30upx;
line-height: 40upx;
}
}
}
}
注释的两行也是关键
js代码就是一些赋值和方法了,因人而异,这里就不贴出来了
这个横向滚动看似简单,但是要做成这种图文的形式,还要要注意一下的,上面提到过的注意点都是比较关键的