首页 > 小程序教程 > 微信小程序选车简单顶部三项导航样式设计制作开发教程

微信小程序选车简单顶部三项导航样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序选车简单顶部三项导航样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="top-tab flex-wrp flex-tab " >
  <view class="toptab flex-item {{currentNavtab==idx ? 'active' : ''}}" wx:for="{{navTab}}" wx:for-index="idx" wx:for-item="itemName" data-idx="{{idx}}" bindtap="switchTab">
    {{itemName}}
  </view>
</view>
 
二、wxss样式文件代码如下:
/**导航**/
.flex-wrp{
    display: flex;
}
.flex-tab{
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: stretch;
}
.flex-item{
  flex-grow: 1;
  text-align: center;
}
.top-tab{
  width: 750rpx;
  height: 100rpx;
  background: #fff;
  color: #000;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 100rpx;
  border-bottom: 30rpx solid #eee;
  margin: 0 20rpx 8rpx 0rpx;
  position: fixed;
  top: 0;
  z-index: 9999;
}
.toptab.active{
  color: #298DE5;
  border-bottom: solid 2px #298DE5;
}

/**页面样式**/
.brand{
    width: 600rpx;
    height: 130rpx;
    clear: both;
}
.brand_new{
    width: 120rpx;
    height: 120rpx;
    float: left;
}
三、js页面代码如下:
//discovery.js
var util = require('../../utils/util.js')
Page({
  data: {
    navTab: ["品牌选车", "条件选车", "轻松选车","","",""],
    currentNavtab: "0",
    
    feed: [],
    feed_length: 0
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    this.refresh();
  },
  switchTab: function(e){
    this.setData({
      currentNavtab: e.currentTarget.dataset.idx
    });
  },

  bindItemTap: function() {
    wx.navigateTo({
      url: '../answer/answer'
    })
  },
  bindQueTap: function() {
    wx.navigateTo({
      url: '../question/question'
    })
  },
  upper: function () {
    wx.showNavigationBarLoading()
    this.refresh();
    console.log("upper");
    setTimeout(function(){wx.hideNavigationBarLoading();wx.stopPullDownRefresh();}, 2000);
  },
  lower: function (e) {
    wx.showNavigationBarLoading();
    var that = this;
    setTimeout(function(){wx.hideNavigationBarLoading();that.nextLoad();}, 1000);
    console.log("lower")
  }

});

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

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