【博学谷IT技术支持】
创建bannner
banner的创建，使用uniappp的swiper组件，这里是直接引用banner
<swiper class="swiper w100 h_170"
:indicator-dots="true"
:autoplay="true"
:interval="2000"
:duration="500"
:circular="true"
>
<swiper-item v-for="(item, index) in 4" :key="index">
<view class="swiper-item uni-bg-red w100 h_100">
<image src="/static/sucai/banner@2x.png" mode=""></image>
</view>
</swiper-item>
</swiper>
这里出现的是比较常用的几个属性。
indicator-dots： 是否显示面板指示点，默认false
autoplay: 是否自动切换,默认false
interval:自动切换时间间隔, 默认5000
duration：滑动动画时长，默认500
circular： 是否采用衔接滑动，即播放到末尾后重新回到开头，默认为false
以下是我们经常使用的几个属性，除此之外，我们用到的也就只有事件了@change: current 改变时会触发 change 事件，event.detail = {current: current, source: source}
@transition: swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy
@animationfinish: 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}
一般情况下，我们得到的结果如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mtooul13-1660301608297)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c7fb7858d8a491e87b884cdab723032~tplv-k3u1fbpfcp-watermark.image?)]
纵向列表
一般情况下，app或者h5页面比较常用的布局
一行有5个，
一般我们定义flex布局，建议在css中把每个属性都单独定义，设置公共属性，可以重复使用
例如下边：
image {
width: 100%;
height: 100%;
vertical-align: center;
}
/* 宽度 */
.w100 {
width: 100%;
}
.w20 {
width: 20%;
}
.w_46 {
width: 46px;
}
.w_100 {
width: 100px;
}
/* 高度 */
.h_30 {
height: 30px;
}
.h_46 {
height: 46px;
}
.h_100 {
height: 100%;
}
.h_170 {
width: 100%;
height: 170px;
}
/* 内间距 */
.p_0_10 {
padding: 0 10px;
}
.p_0_15 {
padding: 0 15px;
}
.p_10_15 {
padding: 10px 15px;
}
.p_t_6 {
padding-top: 6px;
}
.p_t_26 {
padding-top: 26px;
}
/* 外间距 */
/* 边框 */
.border_1 {
border: 1px solid block;
}
/* flex */
.flex_n {
display: -webkit-flex; /* Safari */
display: flex;
flex-wrap: row;
flex-direction: row;
justify-content: space-between;
}
.align-items {
align-items: center;
}
/* 字体 */
.f12 {
font-size: 12px;
}
.f16 {
font-size: 16px;
}
.lh_30 {
line-height: 30px;
}
.t_c {
text-align: center;
}
.color_fff {
color: #FFFFFF;
}
.b_radius_10 {
border-radius: 10px;
}
/* 背景色 */
.bg_fff {
background: #fff;
}
.bg_6D89F7 {
background-color: #6D89F7;
}
这样的设置，我们在后边的使用过程中，可以单独的使用属性，不需要重复定义相同属性
<div class="flex_n">
<div class="align-items p_t_26" v-for="(item, index) in subscribeList" :key="index" @click="routeAll(item)">
<image class="w_46 h_46" :src="item.src" mode="widthFix"></image>
<view class="p_t_6 f12">
{{item.title}}
</view>
</div>
</div>
单独的属性，这样降低了我们的代码量，同时也使阅读性提高
在这里我们看到了使用事件，这里我们介绍下小程序开发的事件
小程序跳转事件
- navigateTo:保留当前页面，跳转到应用内的某个页面，使用
uni.navigateBack可以返回到原页面。这个api使我们最常用的api之一，但是不能跳到 tabbar 页面。 可以存在小程序中页面栈最多十层，一般情况下，我们也不会使用超过10层，会通过调用其他api清空下这个api - redirectTo:关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
- reLaunch:关闭所有页面，打开到应用内的某个页面,这个相对于navigateTo是有很大区别的，它可以在tabber跳转的时候使用
- switchTab：当前api算是跳转中比较特殊的api吧，专门用于tabber的跳转，而且不能在跳转的时候带参数
- nagigateBack： 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。这个api其实可以和navigate这个api相互对应上，都是存于页面小程序的页面栈，不过是一个是存页面的栈，这个是页面的取的栈。而且他的参数不是url，而是delta.
- priloadPage:预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。这个在项目的使用中还是比较少用的，平台的差异性还是比较大的。除了支持app和h5之外，其他的，都不太支持。
navigateTo的使用
uni.navigateTo({ url: 'test?id=1&name=uniapp' });
例子就如下：
let url = `/pages/tabBar/all/index?id=${item.id}&title=${item.title}&type=${item.type}`
uni.reLaunch({
url: url
});
添加事件的方式
uni.navigateTo({
url: 'pages/test?id=1',
events: { // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据 acceptDataFromOpenedPage: function(data) { console.log(data) }, someEvent: function(data) { console.log(data) } ... },
success: function(res) { // 通过eventChannel向被打开页面传送数据 res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' }) } })
跳转后的页面通过
onLoad(params) {},
params就是从A页面跳转过来的参数
redirectTo的使用
uni.redirectTo({ url: 'test?id=1' });
参数的使用和之前的一样
reLaunch的使用
uni.reLaunch({ url: 'test?id=1' });
H5端调用uni.reLaunch之后之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时navigateBack不能返回，如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。
switchTab的使用
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.switchTab({ url: 'url' });
如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide
navigateBack的使用
uni.navigateBack({ delta: 2 });
delta:返回的页面数，如果 delta 大于现有页面数，则返回到首页
animationType: 窗口关闭的动画效果
animationDuration: 窗口关闭动画的持续时间，单位为 ms