轮播广告与导航部分
轮播广告
在微信小程序中,我们通常需要遇到轮播广告的需求,在实现的时候,我们使用swiper组件。
<view class='swiper'>
<swiper interval="{{interval}}" duration="{{duration}}" vertical="{{vertical}}" indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" indicator-active-color="{{indicatorActiveColor}}">
<block wx:for-items="{{banner_url}}" wx:key="this">
<swiper-item>
<block wx:if="{{item}}">
<image src="{{item}}"></image>
</block>
<block wx:else>
<image src="../../images/default_pic.png"></image>
</block>
</swiper-item>
</block>
</swiper>
</view>
布局分析:
(1)首先,在使用swiper的时候,必须使用外层容器 <view class='swiper'></view> 包裹;
(2)然后,再使用swiper组件,swiper组件常用的属性有:
interval => 自动切换时间间隔,默认5000毫秒;
duration => 滑动动画时长,默认500毫秒;
vertical => 滑动方向是否为纵向,默认为false;
indicator-dots => 是否显示面板指示点,默认为false;
autoplay => 是否自动切换,默认为false;
indicator-active-color => 面板指示点当前选中的指示点颜色,默认值为#000000;
indicator-color => 指示点颜色,默认值为rgba(0, 0, 0, .3);
(3)swiper组件中,循环的主体是 <swiper-item></swiper-item> 需要使用 <block></block> 包裹,并且必须设置 wx:key = "this" ;
备注:<block></block> 标签用于包裹循环体,没有实际的作用;另外,对于 <image></image> 标签的 src 属性绑定,同样需要 {{}} ,这一点不同于vue;
轮播广告组件对应的样式:
/* 轮播图样式 */
.swiper {
width: 100%;
margin: 0;
}
.swiper image {
display: inline-block;
width: 100%;
height: 380px;
}
导航部分
实现数据的分类,通常需要有导航部分;
<!-- 导航栏 -->
<view class='nav_top'>
<block wx:for="{{navTopItems}}" wx:key="this">
<view class='nav_top_item {{curNavId==item.id?"active_"+colors[index]:""}}' data-id='{{item.id}}' data-index="{{index}}" bindtap='switchTap'>
<image src="{{item.icon}}"></image>
<text>{{item.title}}</text>
</view>
</block>
</view>
布局分析:
(1)根据需求分析,在点击不同的分类时,文字的颜色也做相应的变化。实现这种变化,我们可以通过添加对应的 class 名来实现;
(2)其中,每一项的自定义属性 id 不同,都对应的数组的的 index 下标,即为不同的 class 名,我们设置 css 样式即可;
(3){{curNavId==item.id?"active_"+colors[index]:"" 用于匹配对应的 class 属性,实现(1)的需求;
(4)对于自定义 data- 属性,在点击时,事件对象都会增加一个对应的属性,可以通过 e.currentTarget.dataset.index (index 就是自定的属性)来使用。
index.wxss样式:
/* 导航栏样式 */
.nav_top {
width: 100%;
display: flex;
/* 横向排列 */
flex-direction: row;
justify-content: space-around;
box-sizing: border-box;
padding: 20px 10px;
color: #fff;
background: #000;
}
.nav_top_item {
width: 100rpx;
font-size: 28rpx;
text-align: center;
border-radius: 8rpx;
box-sizing: border-box;
}
.nav_top_item image {
width: 83rpx;
height: 93rpx;
display: inline-block;
}
.active_red {
color: #e5004f;
}
.active_orange {
color: #eb6100;
}
.active_yellow {
color: #fff100;
}
.active_green {
color: #8fc31f;
}
.active_purple {
color: #aa2adf;
}
index.js文件
// 获取应用实例
var app = getApp();
// 引入数据文件
var fileData = require("../../utils/data.js")
Page({
/**
* 页面的初始数据
*/
data: {
banner_url: fileData.getBannerData(),
interval: 3000,
duration: 1000,
vertical: false,
indicatordots: true,
autoplay: true,
indicatorActiveColor: "#ff0000",
navTopItems: fileData.getIndexNavData(),
colors: ["red", "orange", "yellow", "green", "purple"],
curNavId: 1,
curIndex: 0,
navSectionItems: fileData.getIndexNavSectionData()
},
//导航栏字体颜色切换
switchTap: function(e) {
console.log(e);
console.log(e.currentTarget.dataset.index);
let id = e.currentTarget.dataset.id;
let index = e.currentTarget.dataset.index
this.setData({
curNavId: id,
curIndex: index
})
},
// 页面加载完成执行
onLoad: function(options) {
console.log(this.data.navTopItems);
console.log(this.data.navSectionItems);
// 加载弹框
wx.showToast({
title: '加载中...',
icon: 'loading',
duration: 8000,
mask: true
})
setTimeout(function() {
wx.hideToast();
}, 2000)
// 通过this.setData将数据传到结构层
this.setData({
list: this.data.navSectionItems
})
console.log(this.list)
},
// 上拉加载更多
loadMore: function(res) {
console.log("已经到底了");
var curId = this.data.curIndex;
if (this.data.navSectionItems[curId] == 0) {
return
} else {
wx.showToast({
title: '加载中...',
icon: 'loading',
duration: 2000
})
// 加载一次之后,数据10条;加载第二次之后,数据20条;依次类推;
var that = this;
that.data.navSectionItems[curId] = that.data.navSectionItems[curId].concat(that.data.navSectionItems[curId]);
that.setData({
list: that.data.navSectionItems
})
}
}
})
备注:
(1)通常,我们都把数据放置在 util 文件夹下的 data.js 中,在使用的时候,我们首先通过 var app = getApp(); 获取应用实例,并且引入数据文件 var fileData = require("../../utils/data.js");
(2)对于页面加载的菊花效果,需要使用 wx.showToast 来实现;同时,利用延迟计时器配合 wx.hideToast 来实现菊花效果的隐藏;
(3)<scroll-view scroll-y="true" class='page-body' bindscrolltolower="loadMore"></scroll-view> 中的 bindscrolltolower 绑定 loadMore 函数来实现上拉加载更多效果;
data.js数据文件
// 轮播图数据
function getBannerData() {
var bannerImages = [
'http://ojk4698oq.bkt.clouddn.com/banner_01.png',
'http://ojk4698oq.bkt.clouddn.com/banner_02.png',
'http://ojk4698oq.bkt.clouddn.com/banner_03.png',
'http://ojk4698oq.bkt.clouddn.com/banner_04.png'
];
return bannerImages;
}
// 导航栏数据
function getIndexNavData() {
var navItems = [{
id: 1,
icon: '../../images/nav_icon_01.png',
title: '推存'
},
{
id: 2,
icon: '../../images/nav_icon_02.png',
title: '美甲'
},
{
id: 3,
icon: '../../images/nav_icon_03.png',
title: '美容'
},
{
id: 4,
icon: '../../images/nav_icon_04.png',
title: '美发'
},
{
id: 5,
icon: '../../images/nav_icon_05.png',
title: '美睫'
}
];
return navItems;
}
// list列表
function getIndexNavSectionData() {
var arr = [
[{
subject: "睫毛稀疏 种睫毛来帮忙",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_02.png",
price: "¥100",
message: '先的企业级云服务商,致力于打造以数据为核心的场景化 PaaS服务'
},
{
subject: "爱丽克EircParisSalon",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_03.png",
price: "¥1150",
message: '的PaaS云服务.七牛存储 七牛云为企业提供对象存储服'
},
{
subject: "伊本造型",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_04.png",
price: "¥1047",
message: '伊本造型是由著名形象设计师杨进先生创办。'
},
{
subject: "秋季自然特价美甲",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_01.png",
price: "¥187",
message: '我们最求得是没有最长的时间特价'
},
{
subject: "画对了妆,微微一笑颜值倍儿高!",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_05.png",
price: "¥87",
message: '《微微一笑很倾城》的剧照简直美腻到不要不要的'
}
],
[{
subject: "秋季自然特价美甲",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_01.png",
price: "¥187",
message: '我们最求得是没有最长的时间特价'
},
{
subject: "睫毛稀疏 种睫毛来帮忙",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_02.png",
price: "¥100",
message: '先的企业级云服务商,致力于打造以数据为核心的场景化 PaaS服务'
},
{
subject: "爱丽克EircParisSalon",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_03.png",
price: "¥1150",
message: '的PaaS云服务.七牛存储 七牛云为企业提供对象存储服'
},
{
subject: "画对了妆,微微一笑颜值倍儿高!",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_05.png",
price: "¥87",
message: '《微微一笑很倾城》的剧照简直美腻到不要不要的'
}
],
[{
subject: "秋季自然特价美甲",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_01.png",
price: "¥187",
message: '我们最求得是没有最长的时间特价'
},
{
subject: "睫毛稀疏 种睫毛来帮忙",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_02.png",
price: "¥100",
message: '先的企业级云服务商,致力于打造以数据为核心的场景化 PaaS服务'
},
{
subject: "爱丽克EircParisSalon",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_03.png",
price: "¥1150",
message: '的PaaS云服务.七牛存储 七牛云为企业提供对象存储服'
}
],
[{
subject: "秋季自然特价美甲",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_01.png",
price: "¥187",
message: '我们最求得是没有最长的时间特价'
},
{
subject: "睫毛稀疏 种睫毛来帮忙",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_02.png",
price: "¥100",
message: '先的企业级云服务商,致力于打造以数据为核心的场景化 PaaS服务'
}
],
[{
subject: "睫毛稀疏 种睫毛来帮忙",
civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_02.png",
price: "¥100",
message: '先的企业级云服务商,致力于打造以数据为核心的场景化 PaaS服务'
}]
]
return arr
}
// 导出
module.exports = {
getBannerData,
getIndexNavData,
getIndexNavSectionData
}
备注:
(1)每一组数据都是可以通过定义一个函数来实现,在函数中定义一个数组,并且返回;
(2)注意:必须导出才可以在其他文件中引入并使用。导出的方式如下:
module.exports = {
getBannerData,
getIndexNavData,
getIndexNavSectionData
}
其中,getBannerData、getIndexNavData、getIndexNavSectionData是定义的返回数据的函数。