效果图:

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. SQL中的分组之后TOPN问题

    SQL分组查询然后取每一组的前N条数据 由于SQL的不同的数据库SQL的语法有些略微不同,所以我们这里采用MySQL展示. 创建表 create table person(   id         ...

  2. 「10.13」毛一琛(meet in the middle)·毛二琛(DP)·毛三琛(二分+随机化???)

    A. 毛一琛 考虑到直接枚举的话时间复杂度很高,我们运用$meet\ in\ the\ middle$的思想 一般这种思想看似主要用在搜索这类算法中 发现直接枚举时间复杂度过高考虑枚举一半另一半通过其 ...

  3. noip2011 总结

    铺地毯 题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯.一共有 n 张地毯,编号从 1 到n .现在将这些地毯按照编号从小到大的顺 ...

  4. SSM框架集成各配置文件

    SSM框架集成各配置文件 Spring Spring MVC Mybatis 的整合SpringMVC相当于Spring的一个组件 本来就是一个家族的不存在整合的问题,所以主要就是Spring于Myb ...

  5. 重新整理 .net core 实践篇—————工作单元模式[二十六]

    前言 简单整理一下工作单元模式. 正文 工作单元模式有3个特性,也算是其功能: 使用同一上下文 跟踪实体的状态 保障事务一致性 工作单元模式 主要关注事务,所以重点在事务上. 在共享层的基础建设类库中 ...

  6. excel自动记录项目完成进度,是否逾期,逾期/提前完成天数,计算天数可以把now()改为today()

    =IF(D38="",NOW()-C38,F38) 注:如果没有启用迭代计算,可以点击"文件"-"选项"-"公式"-&q ...

  7. Windows10 准备/安装React研发环境

    安装NodeJS环境,附带NPM 因为React依赖NPM(Node.js Package Manager)来安装,所以我们可以先安装Node.Js环境. Node.Js会自动带NPM组件和自动安装配 ...

  8. 春风十里不如你,全新Windows UI 3(WinUI 3) 的第一个实现Project Reunion 0.5

    什么是WinUI Windows UI库 (WinUI) 是适用于 Windows 桌面应用程序和 UWP 应用程序的本机用户体验 (UX) 框架. WinUI is a user interface ...

  9. Elasticsearch中的Term查询和全文查询

    目录 前言 Term 查询 exists 查询 fuzzy 查询 ids 查询 prefix 查询 range 查询 regexp 查询 term 查询 terms 查询 terms_set 查询 t ...

  10. Linux文件编辑工具——VIM

    Linux文件编辑工具--VIM 1.VIM基本概述 1.1 什么是vim vi 和 vim 是 Linux 下的一个文本编辑工具.(可以理解为 windows 的记事本,或 Notepad++ 1. ...