小程序项目：IT资源共享<轮播图+九宫格>布局

swiper组件(轮播图)

基础库 1.0.0 开始支持，低版本需做兼容处理。我们先来看一下官方的文档，我们把一些用不到的进行删除。详细请查看官方文档

滑块视图容器。其中只可放置<swiper-item>组件，否则会导致未定义的行为。

属性	类型	默认值	必填	说明	最低版本
autoplay	boolean	false	否	是否自动切换	1.0.0
current	number	0	否	当前所在滑块的 index	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
duration	number	500	否	滑动动画时长	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0
vertical	boolean	false	否	滑动方向是否为纵向	1.0.0

easing-function 的合法值

值	说明
default	默认缓动函数
linear	线性动画
easeInCubic	缓入动画
easeOutCubic	缓出动画
easeInOutCubic	缓入缓出动画

小程序项目的首页轮播图，我们使用的是网上资源，如果涉及到版权问题请及时联系小编删除。

wxml

<!-- 轮播图 -->
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style="height:400rpx">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <image src='{{item.url}}' class='slide-image' mode='aspectFill' ></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>

wxss

.swiper {
 height: 400rpx;
 width: 100%;
}
.swiper image {
 height: 100%;
 width: 100%;
}

flex布局(九宫格)

flex为弹性布局（Flexbox），对于不同阅读媒体来说，flex布局占有重要的地位，它会根据屏幕的大小进行一定的变化。详细介绍大家可以查看阮一峰的网络日志
wxml

<!-- 九宫格 -->
  <view class='class_view_panel'>
  <navigator class="class_nav">
    <image src='../images/java.png'></image>
    <text>java</text>
  </navigator>
 
  <navigator class="class_nav">
    <image src='../images/Python.png'></image>
    <text>python</text>
  </navigator>
 
  <navigator class="class_nav">
    <image src='../images/web.png'></image>
    <text>web</text>
  </navigator>
 
  <navigator class="class_nav">
    <image src='../images/xcx.png'></image>
    <text>小程序</text>
  </navigator>
 
  <navigator class="class_nav">
    <image src='../images/php.png'></image>
    <text>php</text>
  </navigator>
 
  <navigator class="class_nav">
    <image src='../images/sql.png'></image>
    <text>sql</text>
  </navigator>
 
  <navigator class="class_nav">
    <image src='../images/go.png'></image>
    <text>GO</text>
  </navigator>
 
  <navigator class="class_nav">
    <image src='../images/github.png'></image>
    <text>github源码</text>
  </navigator>
 
  <navigator class="class_nav">
    <image src='../images/other.png'></image>
    <text>其他</text>
  </navigator>
 
</view>

wxss

/* 九宫格 */
.class_view_carousel {
  width: 100%;
  height: 469rpx; 
  overflow: hidden;
}
.class_view_carousel image {
  width: 100%;
  height: 469rpx; 
}
.class_view_panel {
  display: flex;
  flex-wrap: wrap;
}
.class_nav {
  width: 33.333%;
  height: 200rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  border-right: 1rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
}
.class_view_panel .class_nav:nth-child(3n) {
  border-right: 0rpx none;
}
.class_nav image {
  width: 80rpx;
  height: 80rpx;
}

总体预览图：

首页预览图.png

• 如果推送的文章中，大家认可的，别忘了转发分享;
• 为了大家更好的长久查看源码及讲解，阅读后可以收藏
• 长按下图二维码，与小编携手编程之美

image