今天给大家带来微信小程序分类导航栏四个八个图标制作教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="plate">
<navigator url="/pages/action/action" open-type="switchTab" hover-class="other-navigator-hover" class="plate-item">
<view class="plate-img">
<image src="{{a1src}}"></image>
</view>
<text class="plate-info">
活动资讯
</text>
</navigator>
<navigator url="/pages/signup/signup" open-type="switchTab" hover-class="other-navigator-hover" class="plate-item">
<view class="plate-img">
<image src="{{a2src}}"></image>
</view>
<text class="plate-info">
预约课程
</text>
</navigator>
<navigator url="/pages/teacher/teacher" hover-class="navigator-hover" class="plate-item">
<view class="plate-img">
<image src="{{a4src}}"></image>
</view>
<text class="plate-info">
名师简介
</text>
</navigator>
<navigator url="/pages/about/about" hover-class="navigator-hover" class="plate-item">
<view class="plate-img">
<image src="{{a3src}}"></image>
</view>
<text class="plate-info">
联系我们
</text>
</navigator>
</view>
<view class="plate">
<navigator url="/pages/action/action" open-type="switchTab" hover-class="other-navigator-hover" class="plate-item">
<view class="plate-img">
<image src="{{a1src}}"></image>
</view>
<text class="plate-info">
活动资讯
</text>
</navigator>
<navigator url="/pages/signup/signup" open-type="switchTab" hover-class="other-navigator-hover" class="plate-item">
<view class="plate-img">
<image src="{{a2src}}"></image>
</view>
<text class="plate-info">
预约课程
</text>
</navigator>
<navigator url="/pages/teacher/teacher" hover-class="navigator-hover" class="plate-item">
<view class="plate-img">
<image src="{{a4src}}"></image>
</view>
<text class="plate-info">
名师简介
</text>
</navigator>
<navigator url="/pages/about/about" hover-class="navigator-hover" class="plate-item">
<view class="plate-img">
<image src="{{a3src}}"></image>
</view>
<text class="plate-info">
联系我们
</text>
</navigator>
</view>
|
二、wxss样式文件代码如下:
/**index.wxss**/
.plate{
height:240rpx;
background: #fff;
}
.plate-item{
display: flex;
float:left;
position: relative;
width: 140rpx;
height:180rpx;
margin-top:38rpx;
margin-left:42rpx;
}
.plate-img image{
width: 100rpx;
height: 100rpx;
}
.plate-info{
position: absolute;
height:40rpx;
font-size: 30rpx;
font-family: '微软雅黑';
bottom: 60rpx;
left:-10rpx;
}
|
三、js文件代码如下:
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
a1src:'../../image/a1.png',
a2src: '../../image/a2.png',
a3src: '../../image/a3.png',
a4src: '../../image/a4.png',
},
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '教育模板首页',
path: '/pages/index/index',
success: function (res) {
// 转发成功
console.log("转发成功")
},
fail: function (res) {
// 转发失败
onsole.log("转发失败")
}
}
}
})
|