微信小程序-轮播组件+九宫格
目的效果图:(饿了么界面)
实现思路:
swiper组件+九宫格(容器包裹 图片+文字)+数据绑定、实现跳转
流程:
1.先写出轮播框架、框架里面放九宫格
2.调整样式
3.初步工作完成,接下来写入数据
4.over、大致效果:
具体代码:
wxml:
<view class="swiper-grids">
<swiper class="grids-box" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}">
<swiper-item class="grids-item" wx:for="{{ group }}">
<view class="weui-grids">
<block wx:for="{{grids}}" wx:key="*this">
<navigator url="" class="weui-grid" hover-class="weui-grid_active">
<image class="weui-grid__icon" src="/images/icon/icon_search.png" />
<view class="weui-grid__label">Grid</view>
</navigator>
</block>
</view>
</swiper-item>
</swiper>
</view>
wxss:
@import '../tpls/dialog/dialog-tpl.wxss'; //应用微信小程序官方的样式库weui
/* 九宫格 */
.swiper-grids{
background-color: #eee;
}
.grids-box{
padding: 0rpx 10rpx;
}
.weui-grids{
height: 300rpx;
border: none;
background: #fff;
}
.weui-grid{
width: 25%;
height: 50%;
border: none;
}
.weui-grid__icon{
border-radius: 28rpx;
width: 60rpx;
height: 60rpx;
}
.weui-grid__label{
margin-top: 0rpx;
color: #666;
}
js:
按实际需求再去处理就行了
data: {
// 轮播图部分
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 500,
indicatorColor: '#ff7440',
indicatorActiveColor: '#000000',
//九宫格部分
grids: [0, 1, 2, 3, 4, 5, 6, 7],
group: [0, 1]
},
前面只能做出样式,功能并未实现!!!
提几点特别需要注意的内容,
swiper-item下不能用navigator,跳转不了,
data-绑定的值也和常规不一样,踩了好久的坑,特意再次说明一下。
解决方法:
直接上代码
wxml:
<view class="swiper-grids">
<swiper class="grids-box" indicator-dots="{{indicatorDots}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}">
<swiper-item class="grids-item" wx:for="{{ group }}" wx:key="id">
<view class="weui-grids">
<block wx:for="{{ category }}" wx:key="id">
<view class="weui-grid" bindtap="toGridDetail" data-idex="{{ item.id }}">
<image class="weui-grid__icon" src="{{ item.topic_img_url }}" />
<view class="weui-grid__label">{{ item.name }}</view>
</view>
</block>
</view>
</swiper-item>
</swiper>
</view>
JS:
//banner跳转,常規的跳轉
toShopDetail: function (event) {
let id = index.getDataSet(event, 'id');
wx.navigateTo({
url: '../shop/shop?id=' + id,
})
},
//grid跳转
toGridDetail: function (event) {
let index = event.currentTarget.dataset.idex;
wx.navigateTo({
url: '../category/category?index=' + index,
})
},