微信小程序开发—(十一)navigator

ゝ一纸荒年。 2021-09-12 06:26 1161阅读 0赞

一.理解navigator

![20170505103740605][]

![20170505103754261][]

二.使用

![20170505140407166][]

1.navigator跳转页面样式分为两种一种是左上角带返回按钮跳转到新的页面，另一种不带即在本页跳转，通过控制redirect属性

<view class="container">
      <navigator url="navigator/navigator" hover-class="navigator-hover">跳转到navigator新页面</navigator>
      <navigator url="redirect/redirect" redirect hover-class="other-navigator-hover">redirect在当前页打开</navigator>
    </view>

![20170505135027701][]

2.参数传递:url="navigator/navigator?title=navigator"

在index.wxml

<view class="container"> <navigator url="navigator/navigator?title=navigator" hover-class="navigator-hover">跳转到navigator新页面</navigator> <navigator url="redirect/redirect?title=redirect" redirect hover-class="other-navigator-hover">redirect在当前页打开</navigator> </view>

在redirect.wxml和navigator.wxml中都编写：

<view style="text-align:center"> { {title}} </view> <view> 点击左上角返回回到上级页面 </view>

在redirect.js和navigator.js中都编写：

var app = getApp() Page({ onLoad: function(options) { this.setData({ title: options.title }) } })

![20170505135351922][]

3.采用wx.navigateTo带参数跳转新页面

在index.wxml

<view class="container"> <navigator bindtap="bingurl" hover-class="navigator-hover">wx.navigateTo带参数跳转新页面</navigator> </view>

index.js

bingurl:function() { wx.navigateTo({ url: 'navigator/navigator?title=ll' }) }

在navigator.wxml中都编写：

<view style="text-align:center"> { {title}} </view> <view> 点击左上角返回回到上级页面 </view>

在redirect.js和navigator.js中都编写：

var app = getApp() Page({ onLoad: function(options) { this.setData({ title: options.title }) } })

![20170505140442167][]

4.上传图片带链接跳转到新页面

![20170505143025141][]

在index.wxml中

<view class="container">
      <navigator bindtap="chooselomo">上传图片带链接跳转到新页面</navigator>
    </view>

在index.js中

var app = getApp()  
    Page({
    	data:{
            tempFilePaths: '',
        },
        	/** 
    	 * 上传图片---制作LOMO
    	 */
    	chooselomo: function () {  
    		var _this = this;  
    		wx.chooseImage({  
    			count: 1, // 默认9  
    			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
    			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
    			success: function (res) {  
    				// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
    				_this.setData({  
    				    tempFilePaths:res.tempFilePaths  
    				})
    				wx.navigateTo({
    		            url: 'navigatorimg/navigatorimg?title='+_this.data.tempFilePaths
    		        })
    			}
    		})
    
    	}
    })

在navigatorimg文件中navigatorimg.wxml：

在 navigatorimg 文件中 navigatorimg.js ：

var app = getApp()  
    Page({
      	onLoad: function(options) {
        	this.setData({
         		imgsrc: options.imgsrc
        	})
      	}
    })

![20170505143058297][]

三.跳转不了问题

1.路径问题：在app.json找不到

我在navigator\_index文件中在创建navigator，redirect，navigatorimg文件

![20170505143441956][]

2.配置了tabBar的话 ，navigator标签不能跳转，所以tabBar与navigator不能同时出现

[20170505103740605]: /images/20210813/2cd9f24aa613407f9b50d244d081117a.png
[20170505103754261]: /images/20210813/7b471fc467e84fe782ef7b0bb5572f2b.png
[20170505140407166]: /images/20210813/1388afeabdc2485497f2957d8e83c223.png
[20170505135027701]: /images/20210813/68104d8f389f43a699ce69b5938755f0.png
[20170505135351922]: /images/20210813/ef0b1b1289104c328bcce41c68a343de.png
[20170505140442167]: /images/20210813/e6cf3e6678d046d8b031a29304fd1e10.png
[20170505143025141]: /images/20210813/9cb023a920ed4028900cf081f97b44d3.png
[20170505143058297]: /images/20210813/2e85f881ce9244438a52b2b952441f3b.png
[20170505143441956]: /images/20210813/46af5780a08247a597a73b8d1bfa17e4.png