效果图:

1. 新建一个index页面

主页面分为两块,上面是导航条,下面是轮播图。

导航条:

  <view class='menu'>
<scroll-view scroll-x>
<view class='scroll-nav'>
<navigator url="/pages/baidupage/baidupage" data-navindex='0' bindtap="navNews" class="{{currentTab!=0?'color-black': 'color-green'}}">社会新闻</navigator>
<navigator url="" data-navindex='1' bindtap="navNews" class="{{currentTab!=1?'color-black': 'color-green'}}">国际新闻</navigator>
<navigator url="" data-navindex='2' bindtap="navNews">国内新闻</navigator>
<navigator url="" data-navindex='3' bindtap="navNews">娱乐新闻</navigator>
<navigator url="" data-navindex='4' bindtap="navNews">体育新闻</navigator>
<navigator url="" data-navindex='5' bindtap="navNews">综合新闻</navigator>
</view>
</scroll-view>
</view>

scroll-x表示可以横向滚动,导航条内容较长,因此需要横向滚动。

navigator是导航条,

url里面是跳转链接,这个链接页面必须在app.json里面存在。当点击这个导航时会跳转到baidupage的页面,这个页面里面的内容是打开https://wap.baidu.com,一般小程序是没有权限打开百度页面的,这里是模拟,所以关闭了验证,具体原因参考https://blog.csdn.net/qq_32113629/article/details/79483213

bindtap是绑定事件,当点击这个导航时会触发navNews函数,这个函数在Index.js中定义的。

class里面是导航的颜色显示,当在当前tab下面时,字体是绿色,当切换到其他导航时,颜色变为黑色。

轮播图:

  <view>
<swiper current="{{currentTab}}" bindchange="swiperView">
<swiper-item>
<view class="swiper-view1">社会新闻</view>
</swiper-item>
<swiper-item>
<view class="swiper-view2">国际新闻</view>
</swiper-item>
</swiper>
</view>

社会新闻的页面是swiper-view1,为红色。国际新闻的页面是swiper-view2,为绿色,其中currentTab这个变量就是个关键,将导航条和轮播图联系起来。

总的代码:

app.json

{
"pages": [
"pages/index/index",
"pages/baidupage/baidupage"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F00",
"navigationBarTitleText": "今日头条",
"navigationBarTextStyle": "white"
},
"sitemapLocation": "sitemap97.json"
}

app.js

//app.js
App({
onLaunch: function () { if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
// env 参数说明:
// env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
// 如不填则使用默认环境(第一个创建的环境)
// env: 'my-env-id',
traceUser: true,
})
} this.globalData = {}
}
})

app.wxss

/**app.wxss**/
.container {
height: 100%;
box-sizing: border-box;
} page {
height: 100%;
}

index.js

// miniprogram/pages/index/index.js
Page({ /**
* Page initial data
*/
data: {
currentTab:0
}, //swiper切换操作
swiperView:function(event){
// console.log(event)
var currentIndex = event.detail.current
this.setData({
currentTab: currentIndex
})
}, // 新闻点击操作
navNews:function(event){
// console.log(event)
// console.log(event.currentTarget.dataset.navindex)
var navIndex = event.currentTarget.dataset.navindex
// 需要修改currentTab变量
this.setData({
currentTab:navIndex
})
}, /**
* Lifecycle function--Called when page load
*/
onLoad: function (options) { }, /**
* Lifecycle function--Called when page is initially rendered
*/
onReady: function () { }, /**
* Lifecycle function--Called when page show
*/
onShow: function () { }, /**
* Lifecycle function--Called when page hide
*/
onHide: function () { }, /**
* Lifecycle function--Called when page unload
*/
onUnload: function () { }, /**
* Page event handler function--Called when user drop down
*/
onPullDownRefresh: function () { }, /**
* Called when page reach bottom
*/
onReachBottom: function () { }, /**
* Called when user click on the top right corner to share
*/
onShareAppMessage: function () { }
})

index.json

{
"usingComponents": {}
}

index.wxml

<!--miniprogram/pages/index/index.wxml-->
<view class="container">
<view class='menu'>
<scroll-view scroll-x>
<view class='scroll-nav'>
<navigator url="/pages/baidupage/baidupage" data-navindex='0' bindtap="navNews" class="{{currentTab!=0?'color-black': 'color-green'}}">社会新闻</navigator>
<navigator url="" data-navindex='1' bindtap="navNews" class="{{currentTab!=1?'color-black': 'color-green'}}">国际新闻</navigator>
<navigator url="" data-navindex='2' bindtap="navNews">国内新闻</navigator>
<navigator url="" data-navindex='3' bindtap="navNews">娱乐新闻</navigator>
<navigator url="" data-navindex='4' bindtap="navNews">体育新闻</navigator>
<navigator url="" data-navindex='5' bindtap="navNews">综合新闻</navigator>
</view>
</scroll-view>
</view> <view>
<swiper current="{{currentTab}}" bindchange="swiperView">
<swiper-item>
<view class="swiper-view1">社会新闻</view>
</swiper-item>
<swiper-item>
<view class="swiper-view2">国际新闻</view>
</swiper-item>
</swiper>
</view>
</view>

index.wxss

/* miniprogram/pages/index/index.wxss */
.menu{
background-color: lightcyan;
} .scroll-nav{
background-color: lightcyan;
display: flex;
white-space: nowrap;
font-size: 30rpx;
height: 60rpx;
line-height: 60rpx;
} .scroll-nav navigator{
font-weight: bold;
margin: 0 10rpx;
} .swiper-view1{
width: 100%;
height: 400rpx;
background-color: red;
} .swiper-view2{
width: 100%;
height: 400rpx;
background-color: green;
} .color-black{
color: black;
} .color-green{
color: green;
}

baidupage.wxml

<!--miniprogram/pages/baidupage/baidupage.wxml-->
<web-view src="https://wap.baidu.com/"></web-view>

OK.

navigator导航页面跳转与绑定事件的更多相关文章

  1. jquerymobile页面跳转和参数传递

    http://blog.csdn.net/chen052210123/article/details/7481578 页面跳转: 页面跳转时pagebeforechange事件会被触发两次,通过$(d ...

  2. 微信小程序开发:学习笔记[8]——页面跳转及传参

    微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...

  3. jquery html 动态添加元素绑定事件

    由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中 插入内容,有两种方法, 一种是在写HTML代码写入JS,然后 ...

  4. react-native-http请求后navigator导航跳转

    琢磨react-native有一段时间了.对于我来说,它的确是前端开发工作者的福音,因为我可以利用它来写app的代码,而且基本可以一套代码,多个平台使用. 早就想写一篇随笔记录一下react nati ...

  5. Android实现页面跳转、ListView及其事件

    Android实现页面跳转.ListView及其事件 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 工程内容 进入主页面后,使用ListView实现特 ...

  6. 原创+转发:微信小程序navigator、redirectTo、switchTab几种页面跳转方式

    什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest ...

  7. 【Flutter学习】页面跳转之路由及导航

    一,概述 移动应用通常通过成为‘屏幕’或者‘页面’的全屏元素显示其内容,在Flutter中,这些元素统称为路由,它们由导航器Navigator组件管理.导航器管理一组路由Route对象,并提供了管理堆 ...

  8. Flutter 使用Navigator进行局部跳转页面

    老孟导读:Navigator组件使用的频率不是很高,但在一些场景下非常适用,比如局部表单多页填写.底部导航一直存在,每个tab各自导航场景. Navigator 是管理路由的控件,通常情况下直接使用N ...

  9. android 学习第一天 了解事件机制,页面跳转等常用操作

    点击时间2种 第一种,通过初始化页面 写入点击事件 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedI ...

随机推荐

  1. 五、SELinux安全防护

    rwx 针对用户和组   SELinux  针对程序 targeted:定义网络程序规则   minimum:限制少量软件   mls:限制全部,没定义的全拒绝 [root@proxy ~]# vim ...

  2. itools安装程序无法创建临时文件夹

    做个记录: itools链接ios设备后,安装程序包时提示:无法创建临时文件夹 主要原因可能有以下几点 1.手机储存空间不足. 2.驱动组建被删除了,重启管理软件会自动跟新驱动. 解决办法:1.清除空 ...

  3. 学习响应式编程 Reactor (1) - 响应式编程

    响应式编程 命令式编程(Imperative Programing),是一种描述计算机所需做出的行为的编程范式.详细的命令机器怎么(How)去处理以达到想要的结果(What). 声明式编程(Decla ...

  4. Pytest学习笔记7-skip和skipif的使用

    前言 在实际的测试中,我们经常会遇到需要跳过某些测试用例的情况,pytest提供了skip和ifskip来跳过测试 下面我们就来通过一些例子看看skip和ifskip具体如何使用吧 skip的用法 使 ...

  5. Linux 中的 AutoHotKey 键映射替代方案

    1. Windows 之 AutoHotKey 初次了解AutoHotKey,是在Win 下最爱效率神器:AutoHotKey | 晚晴幽草轩这篇博客中,博主有对AutoHotKey作详细介绍,这里不 ...

  6. .Net Core Host 之详解

    简介: 开发使用有三年经验了,想趁这个机会把net core的知识点梳理一下,也更好的研究一下.NET 5给我们带来的变化. 主机的概念: 一个主机是封装了应用程序的资源,比如一个对象: 依赖注入 ( ...

  7. MindSpore模型精度调优实战:如何更快定位精度问题

    摘要:为大家梳理了针对常见精度问题的调试调优指南,将以"MindSpore模型精度调优实战"系列文章的形式分享出来,帮助大家轻松定位精度问题,快速优化模型精度. 本文分享自华为云社 ...

  8. Vue 消除Token过期时刷新页面的重复提示

    1.问题现象   页面长时间未操作,再刷新页面时,第一次弹出"token失效,请重新登录!"提示,然后跳转到登录页面,接下来又弹出了n个"Token已过期"的后 ...

  9. Innodb中有哪些锁?

    0.前言 上一篇从MySQL层面上了解锁,那么这篇我们从存储引擎上来了解, 以MySQL默认存储引擎Innodb来说,看看有哪些锁?(MySQL版本为8) 1.Shared and Exclusive ...

  10. 资源:Maven相关jar快速下载地址

    Maven下载海外jar包太慢,可以进入下面地址搜索下载 下载地址:https://www.findjar.com/