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;
}
总体预览图:
- 如果推送的文章中,大家认可的,别忘了转发分享;
- 为了大家更好的长久查看源码及讲解,阅读后可以收藏
- 长按下图二维码,与小编携手编程之美