小程式九宮格

摘要： 標題圖 小程式九宮格 效果: 效果 wxml <view class="content"> <view class="title">-...

小程式九宮格

效果:

wxml

<view class="content">
<view class="title">--你對哪些話題感興趣？--</view>
<swiper style="height:350px;">
<swiper-item>
<view class="item">
<view>
<view>
<image src="/images/yanzhi/android.jpg" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/yanzhi/bj.jpg" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/yanzhi/zc.jpg" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
</view>

<view class="item">
<view>
<view>
<image src="/images/yanzhi/sz.jpg" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/yanzhi/java.jpg" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/yanzhi/lg.jpg" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
</view>

<view class="item">
<view>
<view>
<image src="/images/yanzhi/cpjl.jpg" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/yanzhi/jr.jpg" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/yanzhi/qdkf.jpg" 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/yanzhi/yy.jpg" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/yanzhi/sh.jpg" style="width:50px;height:50px;" class="pic"></image>
</view>
<view>dashucoding</view>
</view>
<view>
<view>
<image src="/images/yanzhi/hr.jpg" 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;
}

往後餘生，唯獨有你

簡書作者：達叔小生

90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通

簡書部落格： ofollow,noindex">https://www.jianshu.com/u/c785ece603d1

結語

• 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
• 小禮物走一走 or 點贊