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

swiper组件(轮播图)

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

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

属性	类型	默认值	必填	说明	最低版本
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

wxss

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

flex布局(九宫格)

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

  
  
    
    java
  
 
  
    
    python
  
 
  
    
    web
  
 
  
    
    小程序
  
 
  
    
    php
  
 
  
    
    sql
  
 
  
    
    GO
  
 
  
    
    github源码
  
 
  
    
    其他
  
 

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