首页 > 小程序教程 > 微信小程序分类导航栏四个八个图标制作教程

微信小程序分类导航栏四个八个图标制作教程

上一篇 下一篇
今天给大家带来微信小程序分类导航栏四个八个图标制作教程,制作好以后效果图如下:


一、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("转发失败")
      }
    }
  }
})

模板简介:该模板名称为【微信小程序分类导航栏四个八个图标制作教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 103,180次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 05-16
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信公众平台 微信图片 微信素材 自适应 html5 微信文章 微信模板 单页式简历模板 企业网站 响应式
您可能会喜欢的其他模板