效果:
效果
wxml
<view class="content">
<view class="title">--你对哪些话题感兴趣?--</view>
<swiper style="height:350px;">
<swiper-item>
<view class="item">
<view>
<view>
<image src="/images/" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
</view>
<view class="item">
<view>
<view>
<image src="/images/" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
</view>
<view class="item">
<view>
<view>
<image src="/images/" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="item">
<view>
<view>
<image src="/images/" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
</view>
</swiper-item>
</swiper>
<view class="btn">
请至少选择三个话题
</view>
</view>
.content {
font-family: "Microsoft YaHei";
}
.title {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #ccc;
}
.item {
display: flex;
flex-direction: row;
margin-bottom: 30px;
font-size: 16px;
}
.item view {
margin: 0 auto;
text-align: center;
}
.pic {
border-radius: 50%;
}
.btn {
width: 60%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #00b38a;
margin: 0 auto;
color: #ccc;
border-radius: 3px;
}