微信小程序实现顶部导航特效

2024-10-20 12:34:55

本文实例为大家分享了微信小程序实现顶部导航的具体代码，供大家参考，具体内容如下

之前Android开发时，顶部导航用到viewPage，微信小程序里想要达到同样的效果，可用swiper来实现，先看效果图

上代码：

1.swiperTab.js

Page({
  data: {
    // tab切换
    currentTab: 0,
  },
  swichNav: function (e) {
    console.log(e);
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current,
      })
    }
  },
  swiperChange: function (e) {
    console.log(e);
    this.setData({
      currentTab: e.detail.current,
    })

  },
  onLoad: function (options) {
    // 生命周期函数--监听页面加载
  },
  onReady: function () {
    // 生命周期函数--监听页面初次渲染完成
  },
  onShow: function () {
    // 生命周期函数--监听页面显示
  },
  onHide: function () {
    // 生命周期函数--监听页面隐藏
  },
  onUnload: function () {
    // 生命周期函数--监听页面卸载
  },
  onPullDownRefresh: function () {
    // 页面相关事件处理函数--监听用户下拉动作
  },
  onReachBottom: function () {
    // 页面上拉触底事件的处理函数
  },
  onShareAppMessage: function () {
    // 用户点击右上角分享
    return {
      title: 'title', // 分享标题
      desc: 'desc', // 分享描述
      path: 'path' // 分享路径
    }
  }
})

2.swiperTab.wxml

<view class="page">

 <!--顶部导航栏-->
 <view class="swiper-tab">
  <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Tab1</view>
  <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Tab2</view>
  <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Tab3</view>
 </view>

 <!--内容主体-->
 <swiper class="swiper" current="{{currentTab}}" duration="200" bindchange="swiperChange">
  <swiper-item>
   <view>我是tab1</view>
  </swiper-item>
  <swiper-item>
   <view>我是tab2</view>
  </swiper-item>
  <swiper-item>
   <view>我是tab3</view>
  </swiper-item>
 </swiper>
</view>

3.swiperTab.wxss

.page {
 margin-left: 10rpx;
 margin-right: 10rpx;
}

.swiper-tab {
 display: flex;
 flex-direction: row;
 line-height: 80rpx;
 border-bottom: 2rpx solid #777;
}

.tab-item {
 width: 33.3%;
 text-align: center;
 font-size: 15px;
 color: #777;
}

.swiper {
 height: 1100px;
 background: #dfdfdf;
}

.on {
 color: blue;
 border-bottom: 5rpx solid blue;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序顶部可滚动导航效果

需求是小程序做头部做导航分类的效果顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,内容用类似模板方式引用,可重复利用 <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%"> <view wx:for="{{classify}}" wx:key="id" data-type
微信小程序中顶部导航栏的实现代码

微信小程序中顶部导航栏的实现实例代码: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> <view class="swiper-tab-list {{curre
微信小程序配置顶部导航条标题颜色的实现方法

微信小程序配置顶部导航条标题颜色的实现方法关于小程序导航顶部配置都写在.json文件中. { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "bac
微信小程序系列之自定义顶部导航功能

具备基础 vue框架:vue官方文档 mpvue框架:mpvue官方文档全局配置 •找到全局的app.json文件,在配置中添加如下内容: "navigationStyle": "custom" "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", &q
微信小程序实战之顶部导航栏（选项卡）（1）

本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下需求:顶部导航栏效果图: wxml:  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu
微信小程序开发之顶部导航栏实例代码

微信小程序开发之顶部导航栏需求:顶部导航栏效果图: wxml:  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap=
微信小程序顶部导航栏滑动tab效果

小程序商品展示需要导航栏的商品分类进行滑动,供大家参考,具体内容如下效果图: 首先是滑动的效果: <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;"> </scroll-view> 小程序使用</scroll-view>,横向移动即可 WXML:这里面我将导航栏显示类目定义为5个,每个20%,当超出5个分类,也就是index>4的时候,导
微信小程序实现顶部导航特效

本文实例为大家分享了微信小程序实现顶部导航的具体代码,供大家参考,具体内容如下之前Android开发时,顶部导航用到viewPage,微信小程序里想要达到同样的效果,可用swiper来实现,先看效果图上代码: 1.swiperTab.js Page({ data: { // tab切换 currentTab: 0, }, swichNav: function (e) { console.log(e); var that = this; if (this.data.currentTab ===
微信小程序自定义顶部导航组件

本文实例为大家分享了微信小程序自定义顶部导航组件,供大家参考,具体内容如下在components中新建文件夹navbar components/navbar.wxml  <view class="navbar" style="height:{{navHeight+5}}px;background-image:url('{{imgUrl}}') "> <!-- 左上角返回按
uniapp开发微信小程序自定义顶部导航栏功能实例

目录自定义导航栏渐变色,先上效果重点来了,导航栏设置渐变色补充:更换图标总结自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "window": { "navigationBarBackgroundColor": "#32A2FD", // 顶部背景颜色 "navigationBarTitleText
微信小程序 flex实现导航实例详解

微信小程序 flex实现导航实例详解实现示意: 1.链接顶部内边距,留出圆形图标的位置. 2.伪元素:before绘制圆形. 3.圆形中添加图标. 4.左右外边距控制间距,及促使在需要的地方换行. wxml: <view class="serviceMenu"> <navigator url="http://xwbline.com/">资本</navigator> -- </view> wxss: .serviceM
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题

这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题,还是不要贸然的上了,所以用老版本的替换所有页面的小程序头来做. 参考了其他篇的文章,但是没有解决自定义背景的和返回按钮的颜色的问题,还有因为IOS的橡皮筋效果,对IOS端不太友好,屏幕会乱划.所以针对性的改动了这些功能,因为才学小程序两三天,所以其中踩了很多坑,但好在最后效果还是达到了. 下面是效
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)

本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标MUI的off canvas效果点击列表 -- 右侧展示页面不动,左侧导航滑动 -- 点击右侧遮罩层或者左侧选项 -- 左侧还原,右侧去掉遮罩层实现方案2:左右分上下两层,左侧滑动,右侧不动 WXML <view class="page"> <view class="page-top {{open ? 'page-top-show' : ''}}">
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)

本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标--YDUI的Popup组件点击列表图标--左侧的菜单栏显示--点击关闭按钮或者右侧的遮罩层--左侧菜单栏关闭实现方案1:左侧菜单和右侧展示页面分为上下两层 wxml <view class="page"> <----下层左侧导航---> <view class="page-bottom"> <view class="pag
Taro小程序自定义顶部导航栏功能的实现

微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon.扩展dom,适配安卓.ios.h5,全面屏. 我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下. 1.NavBar.js import Taro from '@tarojs/taro'; import React, { Component } from 'react' import { V

微信小程序实现顶部导航特效

相关推荐

随机推荐