navigator导航页面跳转与绑定事件
效果图:
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导航页面跳转与绑定事件的更多相关文章
- jquerymobile页面跳转和参数传递
http://blog.csdn.net/chen052210123/article/details/7481578 页面跳转: 页面跳转时pagebeforechange事件会被触发两次,通过$(d ...
- 微信小程序开发:学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
- jquery html 动态添加元素绑定事件
由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中 插入内容,有两种方法, 一种是在写HTML代码写入JS,然后 ...
- react-native-http请求后navigator导航跳转
琢磨react-native有一段时间了.对于我来说,它的确是前端开发工作者的福音,因为我可以利用它来写app的代码,而且基本可以一套代码,多个平台使用. 早就想写一篇随笔记录一下react nati ...
- Android实现页面跳转、ListView及其事件
Android实现页面跳转.ListView及其事件 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 工程内容 进入主页面后,使用ListView实现特 ...
- 原创+转发:微信小程序navigator、redirectTo、switchTab几种页面跳转方式
什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest ...
- 【Flutter学习】页面跳转之路由及导航
一,概述 移动应用通常通过成为‘屏幕’或者‘页面’的全屏元素显示其内容,在Flutter中,这些元素统称为路由,它们由导航器Navigator组件管理.导航器管理一组路由Route对象,并提供了管理堆 ...
- Flutter 使用Navigator进行局部跳转页面
老孟导读:Navigator组件使用的频率不是很高,但在一些场景下非常适用,比如局部表单多页填写.底部导航一直存在,每个tab各自导航场景. Navigator 是管理路由的控件,通常情况下直接使用N ...
- android 学习第一天 了解事件机制,页面跳转等常用操作
点击时间2种 第一种,通过初始化页面 写入点击事件 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedI ...
随机推荐
- 五、SELinux安全防护
rwx 针对用户和组 SELinux 针对程序 targeted:定义网络程序规则 minimum:限制少量软件 mls:限制全部,没定义的全拒绝 [root@proxy ~]# vim ...
- itools安装程序无法创建临时文件夹
做个记录: itools链接ios设备后,安装程序包时提示:无法创建临时文件夹 主要原因可能有以下几点 1.手机储存空间不足. 2.驱动组建被删除了,重启管理软件会自动跟新驱动. 解决办法:1.清除空 ...
- 学习响应式编程 Reactor (1) - 响应式编程
响应式编程 命令式编程(Imperative Programing),是一种描述计算机所需做出的行为的编程范式.详细的命令机器怎么(How)去处理以达到想要的结果(What). 声明式编程(Decla ...
- Pytest学习笔记7-skip和skipif的使用
前言 在实际的测试中,我们经常会遇到需要跳过某些测试用例的情况,pytest提供了skip和ifskip来跳过测试 下面我们就来通过一些例子看看skip和ifskip具体如何使用吧 skip的用法 使 ...
- Linux 中的 AutoHotKey 键映射替代方案
1. Windows 之 AutoHotKey 初次了解AutoHotKey,是在Win 下最爱效率神器:AutoHotKey | 晚晴幽草轩这篇博客中,博主有对AutoHotKey作详细介绍,这里不 ...
- .Net Core Host 之详解
简介: 开发使用有三年经验了,想趁这个机会把net core的知识点梳理一下,也更好的研究一下.NET 5给我们带来的变化. 主机的概念: 一个主机是封装了应用程序的资源,比如一个对象: 依赖注入 ( ...
- MindSpore模型精度调优实战:如何更快定位精度问题
摘要:为大家梳理了针对常见精度问题的调试调优指南,将以"MindSpore模型精度调优实战"系列文章的形式分享出来,帮助大家轻松定位精度问题,快速优化模型精度. 本文分享自华为云社 ...
- Vue 消除Token过期时刷新页面的重复提示
1.问题现象 页面长时间未操作,再刷新页面时,第一次弹出"token失效,请重新登录!"提示,然后跳转到登录页面,接下来又弹出了n个"Token已过期"的后 ...
- Innodb中有哪些锁?
0.前言 上一篇从MySQL层面上了解锁,那么这篇我们从存储引擎上来了解, 以MySQL默认存储引擎Innodb来说,看看有哪些锁?(MySQL版本为8) 1.Shared and Exclusive ...
- 资源:Maven相关jar快速下载地址
Maven下载海外jar包太慢,可以进入下面地址搜索下载 下载地址:https://www.findjar.com/