微信小程序-自定义底部导航

代码地址如下:
http://www.demodashi.com/demo/14258.html

一、前期准备工作

软件环境:微信开发者工具

官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。
  • 实现用户自定义底部导航
2、案例目录结构

二、程序实现具体步骤

1.自定义nav.wxml代码
<template name="nav">
      <view class="nav_link" bindtap="{{fn}}">
        <button class="defalut_btn {{current== 0 ? ‘‘ : ‘on_cor‘}}">
          <block wx:if="{{style == 0}}">
                <icon class="iconfont {{ico}} del_ico idx_ico"></icon>
                <text class="txt">{{name}}</text>
          </block>
          <block wx:if="{{style == 1}}">
                <view class="plus_wp">
                  <image src=‘../../images/plus_ico.png‘ class="plus_ico" />
                </view>
                <text class="txt txt_fb">{{name}}</text>
          </block>
        </button>
      </view>
</template>
2.使用index.wxml代码
<import src="../../template/nav" />
<view class="flex fix_nav_wp">
<block wx:for="{{navData}}" wx:key="">
    <template is="nav" data="{{...item}}"/>
</block>
</view>
<view>首页</view>
3.index.js逻辑代码

a.初始化数据

/**
   * 页面的初始数据
   */
  data: {
    navData: [
      {
        name: "广场",  //文本
        current: 1,    //是否是当前页,0不是  1是
        style: 0,     //样式
        ico: ‘icon-qiugouguanli‘,  //不同图标
        fn: ‘gotoIndex‘   //对应处理函数
      }, {
        name: "旧物",
        current: 0,
        style: 0,
        ico: ‘icon-mingpianjia‘,
        fn: ‘gotoOldGoods‘
      }, {
        name: "发布",
        current: 0,
        style: 1,
        ico: ‘‘,
        fn: ‘gotoPublish‘
      }, {
        name: "招领",
        current: 0,
        style: 0,
        ico: ‘icon-yikeappshouyetubiao35‘,
        fn: ‘gotoRecruit‘
      }, {
        name: "我的",
        current: 0,
        style: 0,
        ico: ‘icon-wode‘,
        fn: ‘gotoMine‘
      },
    ],
  },

b.页面之间的跳转

  gotoOldGoods: function(){
    wx.redirectTo({
      url: ‘/pages/oldgoods/oldgoods‘,
    });
  },
  gotoPublish:function(){
    wx.redirectTo({
      url: ‘/pages/publish/publish‘,
    });
  },
  gotoRecruit:function(){
    wx.redirectTo({
      url: ‘/pages/recruit/recruit‘,
    });
  },
  gotoMine:function(){
    wx.redirectTo({
      url: ‘/pages/mine/mine‘,
    });
  },

三、案例运行效果图

四、总结与备注

暂无微信小程序-自定义底部导航

代码地址如下:
http://www.demodashi.com/demo/14258.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

原文地址:https://www.cnblogs.com/demodashi/p/9802030.html

时间: 2024-10-07 21:32:06

微信小程序-自定义底部导航的相关文章

使用wepy开发微信小程序的底部导航

前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/ wepy官方文档:https://tencent.github.io/wepy/document.html#/ wepy小程序项目初始化:wepy小程序入门之项目初始化 今天的目标是开发微信小程序的底部导航 效果图: 1.打开编辑器(我用的是vscode),然后打开微信开发者工

再谈小程序自定义底部导航

小程序自定义tabBar再探索 前言 最近有很多微信开发者朋友在QQ上加我好友,忽然意识到大家对微信自定义底部导航栏需求还是挺大的,故而再次整理下底部导航栏组件开发思路.和之前的文章还是有些区别,并且底部导航栏组件增加新的特性以及一些优化开发体验的骚操作. 技术选型 与之前不同,现在我们有两种方法实现自定义底部导航栏,因为小程序在2.5.0开始支持自定义底部导航栏了戳此处看文档,所以我们现在的可选方案为: 通过HideTabBar接口hack底部导航栏 通过小程序支持配置实现底部导航栏 下面根据

微信小程序自定义顶部导航demo

注释:自定义导航需要自备相应图片 一.设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏. 1.全局顶部导航自定义,在app.json的“window”里添加"navigationStyle": "custom" 2.只在某一个页面自定义顶部导航,在该页面的json文件里添加"navigationStyle": "custom&qu

微信小程序(底部导航的实现)

详情请看官方文档介绍: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html 在根目录配置文件中配置底部导航: 注意: tabBar中list是一个数组,最少配置2个,做多5个tab,tab按数组的顺序排序. tabBar配置属性说明: color:tab上文字默认的颜色 selectedColor:文字选中时的颜色 backgroundColor:tab背景色 …… position:可选值bottom,top,需要注意

小程序自定义底部导航

这个方法比较简单,虽然有一些延迟,但也算是解决了一半自定义的问题. 首先在pages同级目录下创建tabbar.wxml文件, <template name="tabBar"> <view class="tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : '

微信小程序 关于底部导航设置

在app.json 中添加 "tabBar": { "color":"#ffffff", "borderStyle":"white", "selectedColor":"#d81e06", "backgroundColor":"#245685", "list": [{ "pagePath"

微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键、首页键,动态设置标题,响应式组件

微信小程序自定义导航栏 navigation bar 返回键 首页 github: https://github.com/chen-yt/wx_custom_navigation_bar https://github.com/Superman2113/wx_custom_navigation_bar 代码 navbar组件 navbar.wxml <view class="navbar" style="{{'height: ' + navigationBarHeight

值得记录的(五)- 微信小程序自定义 tabbar

一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tabbar的情况下自制 tabbar 的方法.并说说这几种方法各自的特色. 类 navigator 跳转方式 类 navigator 跳转方式是我自己起的名称,因为它的实现思路就是这个样子的.期初参考 微信小程序自定义tabBar组件开发 这篇博文的思路.进行了这种方式的尝试,并为后续提供了解决思路.在

微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的是自定义组件化开发,就是把弹出框封装成一个组件,然后多处调用. 解决了小程序开发自定义弹窗出现后,遮罩层下的页面仍可以滚动的方法: 给遮罩层的最外层view中加入catchtouchmove="preventTouchMove" 即可解决该遮罩层点透问题. 根据需要还可以自定义多个按钮及事