zoukankan      html  css  js  c++  java
  • 小程序九宫格

    标题图

    小程序九宫格

    效果:

    效果

    wxml

    <view class="content">
      <view class="title">--你对哪些话题感兴趣?--</view>
      <swiper style="height:350px;">
        <swiper-item>
          <view class="item">
            <view>
              <view>
                <image src="/images/" style="50px;height:50px;" class="pic"></image>
              </view>
              <view>dashucoding</view>
            </view>
            <view>
              <view>
                <image src="/images/" style="50px;height:50px;" class="pic"></image>
              </view>
              <view>dashucoding</view>
            </view>
            <view>
              <view>
                <image src="/images/" style="50px;height:50px;" class="pic"></image>
              </view>
              <view>dashucoding</view>
            </view>
          </view>
    
          <view class="item">
            <view>
              <view>
                <image src="/images/" style="50px;height:50px;" class="pic"></image>
              </view>
              <view>dashucoding</view>
            </view>
            <view>
              <view>
                <image src="/images/" style="50px;height:50px;" class="pic"></image>
              </view>
              <view>dashucoding</view>
            </view>
            <view>
              <view>
                <image src="/images/" style="50px;height:50px;" class="pic"></image>
              </view>
              <view>dashucoding</view>
            </view>
          </view>
    
          <view class="item">
            <view>
              <view>
                <image src="/images/" style="50px;height:50px;" class="pic"></image>
              </view>
              <view>dashucoding</view>
            </view>
            <view>
              <view>
                <image src="/images/" style="50px;height:50px;" class="pic"></image>
              </view>
              <view>dashucoding</view>
            </view>
            <view>
              <view>
                <image src="/images/" style="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="50px;height:50px;" class="pic"></image>
              </view>
              <view>dashucoding</view>
            </view>
            <view>
              <view>
                <image src="/images/" style="50px;height:50px;" class="pic"></image>
              </view>
              <view>dashucoding</view>
            </view>
            <view>
              <view>
                <image src="/images/" style="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 {
       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

    结语

    • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
    • 小礼物走一走 or 点赞
  • 相关阅读:
    电容充放电时间计算
    常见AVX贴片钽电容封装尺寸、容值、耐压值的关系
    EPCS1结构及访问注意事项
    拜占庭将军问题
    photoshop的蒙板的作用
    linux系统脚本的常见启动顺序
    进制转换
    8>ORACLE四种关闭方式
    32位和64位操作系统的区别
    javascript 对大小写的问题
  • 原文地址:https://www.cnblogs.com/dashucoding/p/10045118.html
Copyright © 2011-2022 走看看