小程序九宫格

谁借莪１个温暖的怀抱￠ 2021-09-17 03:42 359阅读 0赞

![标题图][1240]

> 小程序九宫格

效果:

![效果][1240 1]

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;
    }

> 往后余生，唯独有你  
> 简书作者：达叔小生  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[1240]: /images/20210724/d61fa5ea0f6a4e0eb02c3a05304c2a89.png
[1240 1]: /images/20210724/1d4e8520757a41d4a04b89f048ef153f.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1