【uniapp小程序】封装路由跳转navigator-ag九游会j9官方网站

ag九游会j9官方网站-j9九游会登录入口首页新版

ag九游会j9官方网站-j9九游会登录入口首页新版apij9九游会登录入口首页新版的解决方案学堂社区

控制台注册

登录

1

1

【uniapp小程序】封装路由跳转navigator

苒总小保镖

2023-06-29

141 浏览

#小程序开发

返回文档

江海入海，知识涌动，这是我参与江海计划的第4篇。
1、路由跳转传参简易封装
1.1、首先列举一下需要考虑的参数
●url ：目标地址
●params：有没有携带参数跳转
●opentype：跳转方式(文档里名字为open-type)
●animation-type：当 open-type 为 navigate、navigateback 时有效，窗口的显示/关闭动画效果。
●animation-duration：窗口显示/关闭动画的持续时间。
1.2、封装代码
本示例代码封装在mina.js 文件：
●opentype 默认值为 navigate；
●animationtype 默认值为pop-in；
●animationduration 默认值为300毫秒
​

javascript

复制代码

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

vue.prototype.gobypath = function(path, params, opentype = 'navigate', animationtype = 'pop-in', animationduration =

300) {

// 有参数执行这里的逻辑

if(params !==undefined && params !== null){

if (opentype == 'navigate') {

// 如果跳转方式为navigate，则使用navigateto方式跳转，保留当前页面，跳转到应用内的某个页面

uni.navigateto({

url: path "?params=" encodeuricomponent(json.stringify(params)),

animationtype: animationtype,

animationduration: animationduration

})

} else {

// 如果跳转方式不为navigate，则使用redirectto方式跳转，关闭当前页面，跳转到应用内的某个页面

uni.redirectto({

url: path "?params=" encodeuricomponent(json.stringify(params)),

animationtype: animationtype,

animationduration: animationduration

})

}

}else{

// 没有参数直接使用navigateto方式跳转，保留当前页面，跳转到应用内的某个页面

uni.navigateto({

url: path,

animationtype: animationtype,

animationduration: animationduration

})

}

}

// 返回上一页

vue.prototype.goback = function() {

uni.navigateback({

delta: 1

});

}

encodeuricomponent是对参数进行编码，因为url有长度限制，太长的字符串会传递失败。 在获取参数的页面，再使用 decodeuricomponent进行解码即可。
2、案例演示
封装好了我们就来试试好不好使。
介绍一下我的案例：点击轮播图，跳转值轮播图的详情页(index.vue)，携带图片和标题两个参数，并渲染在详情页面(detail.vue)。
index.vue文件：
这里只粘贴了部分轮播图组件代码，和所需要的数据。轮播图案例移步至：

 swiper常用属性介绍：
     indicator-dots:轮播图正前方的小圆点(此案例没有使用官方提供的，是自定义的在右下角附近)
     autoplay：是否自动切换
     interval：图片轮播间隔此处为3秒
     duration：图片轮播动画时长 此处为0.5秒
     circular：是否开启无缝轮播（此处为到第三张图片后无缝播放第一张图片）
​

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<template>

<!-- 轮播图组件 -->

<view class="px-3 py-2 ">

<swiperdot class="position-relative" :current="current" :info="swipers">

<swiper :autoplay="true" :interval="3000" :duration="500" circular style="height: 250rpx;"

@change="changeindicatordots">

<swiper-item v-for="(item,index) in swipers" :key="index" @click="gobypath('/pages/index/detail',{src:item.src,title:item.title})">

<image :src="item.src" mode="sapectfill" style="height:250rpx;width: 100%;" class="rounded-lg">

</image>

</swiper-item>

</swiper>

</swiperdot>

</view>

</template>

<scr ipt>

import swiperdot from '@/components/comon/swiper-doc.vue'

export default {

components: {

swiperdot

},

data() {

return {

current: 0, // 标识当前选中的图片序列号

swipers: [{

src: '/static/swiper/1.jpg',

title: '自定义轮播图组件图片一'

}, {

src: '/static/swiper/2.jpg',

title: '自定义轮播图组件图片二名字很长测试用'

}, {

src: '/static/swiper/3.jpg',

title: '自定义轮播图组件图片三'

}]

}

}

</ script>

detail.vue文件
​

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<template>

<view>

<view class="title">

{{title}}

</view>

<image :src="src" mode="sapectfill" style="height:250rpx;width: 100%;"></image>

<view>

<!-- 调用封装好的goback方法返回上一页 -->

<button type="primary" @click="goback">返回</button>

</view>

</view>

</template>

// s c r i pt

import swiperdot from '@/components/comon/swiper-doc.vue'

export default {

components: {

swiperdot

},

data() {

return {

src:''，

title:''

}

},

onload(option) {

// 打印传递过来的参数

console.log(option)

this.src = json.parse(decodeuricomponent(option.params)).src;

this.title = json.parse(decodeuricomponent(option.params)).title;

}

}

> decodeuricomponent将参数解码并使用json.parse() 方法用来解析json字符串转换为对象
效果图

​

请登录后发表内容

1个评论

按发布时间降序

香蕉不会写代码

2023-08-29

返回文档

感谢分享

​

赞同 0

回复

打赏

苒总小保镖

文章  42  点赞  17

关 注

相关文章

热门文章

• 【倒计时10天】企业数据安全接口人职业能力认证
• 支付宝开发者日·厦门站
• 探索隐私计算与精准营销的应用创新——产品面对面系列直播第三期
• 【获奖名单公布】工具类小程序话题讨论，你中奖了吗？
• 报名开启丨邀你一起探索云端 ai 新兴技术和发展模式

热门问答

• 影视创作剪辑怎么提供资质
• 支付宝商家粉丝群
• 我的小程序上架三天被判违规，直接被下架了
• 2023/09/17(至今3天没人解决) 当面付 统一收单线下交易预创建接口 官方php easysdk验签语法错误
• 这些小程序名称恶意“蹭热度”，“蹭流量”而使用与热门活动或支付宝官方相同或相似的名称，从而引起用户混淆！