演示案例效果并实现导航跳转(前半部分，到请求数据库为止)

最新推荐文章于 2024-08-20 13:24:05 发布

结城明日奈是我老婆

最新推荐文章于 2024-08-20 13:24:05 发布

阅读量395

点赞数

分类专栏： # uni-app 文章标签：数据库 vue.js javascript

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/122179025

版权

uni-app 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

先将这段代码创建好

index.vue

<template>
	<view>
		<view>
			<swiper :indicator-dots="indicatorDots"
			:autoplay="autoplay"
			:interval="interval"
			:circular="circular">
				<swiper-item v-for="(sw,index) in swiper_wj" :key="index">
					<!-- <image :src="sw.url" mode="scaleToFill"> -->
						<navigator :url="sw.naviUrl" :open-type="sw.gotoMode">
                            <!--:open-type="sw.gotoMode":这样就可以进行灵活的跳转页面了-->
                            <!--想要swiper中的图片跳转，得在前面加一个navigator标签-->
							<image :src="sw.url" mode="scaleToFill"></image>
						</navigator>
					<!-- </image> -->
				</swiper-item>
			</swiper>
		</view>
		<view>
			<view class="XuXiang">
				<navigator v-for="(na,index) in navigator_text" :key="index" class="RiChang" url="../shopList/shopList">
					{{na.text}}
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				swiper_wj:[
					{
						url: '../../static/ysn1.jpg',
						naviUrl:'../shopList/shopList',
						gotoMode:'navigate'
					},
					{
						url: '../../static/ysn2.jpg',
						naviUrl:'../message/message',
						gotoMode:'switchTab'
					},
					{
						url: '../../static/ysn3.jpg',
						naviUrl:'../my/my',
						gotoMode:'switchTab'
					}
				],
				navigator_text:[
					{
						id: 1,
						icon:'',
						text:'美食'
					},
					{
						id: 2,
						icon:'',
						text:'看电视'
					},
					{
						id:3,
						icon:'',
						text:'找工作'
					}
				],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				circular: true
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	swiper{
		height: 350rpx;
	}
	swiper swiper-item image{
		width: 100%;
		background-size: cover;
	}
	.XuXiang{
		position: relative;
		display: flex;
		padding: 10px;
		justify-content: center;
	}
	.RiChang{
		width: 200rpx;
		height: 200rpx;
		margin: 10rpx;
		text-align: center;
		border: 1px solid #ff0000;
		box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.2);
	}
</style>

message.vue

<template>
    <view>
		
	</view>
</template>

<script>
    export default{
        name: 'message',
        components:{},
        data() {
            return {
                
            }
        },
    }
</script>

<style scoped>

</style>

my.vue

<template>
    <view>
		
	</view>
</template>

<script>
    export default{
        name: 'my',
        components:{},
        data() {
            return {
                
            }
        },
    }
</script>

<style scoped>

</style>

shopList.vue

<template>
    <view>
		
	</view>
</template>

<script>
    export default{
        name: 'shoList',
        components:{},
        data() {
            return {
                
            }
        },
    }
</script>

<style scoped>

</style>

src > pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "本地生活"
			}
		},
		{
			"path": "pages/message/message",
			"style": {
				"navigationBarTitleText": "信息"
			}
		},
		{
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "我的"
			}
		},
		{
			"path": "pages/shopList/shopList",
			"style": {
				"navigationBarTitleText": "美食"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar":{
		"list":[
			{
				"text":"主页",
				"pagePath":"pages/index/index"
			},
			{
				"text":"信息",
				"pagePath":"pages/message/message"
			},
			{
				"text":"我的",
				"pagePath":"pages/my/my"
			}
		]
	}
}

传递数据`id`和`name`

<navigator v-for="(na,index) in navigator_text" :key="index" class="RiChang" url="../shopList/shopList?id=x&title=x">

以?的形式携带俩个参数(id=x(id以x表述))同时传递我们的第二个参数((中间用&区分)title=(title=x用来进行传递,值是x))

当然参数值可以用Mustache语法来进行动态的填充，id就是当前na下的值:

wxml中:

x <navigator wx:for="(na,index) in navigator_text" wx:key="index" class="RiChang" url="../shopList/shopList?id={{na.id}}&title={{na.text}}">

vscode的vue-cli创建的uniapp项目:

<navigator v-for="(na,index) in navigator_text" :key="index" class="RiChang" 
				url="../shopList/shopList?id=${na.id}&title=${na.text}">
</navigator>

但是我们查看shopList里面的页面参数(把最左下脚展示的页面路径改成页面参数)发现参数是id=${na.id}&title=${na.text}不对劲，所以参考官网

<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

的样式咱们修改一下自己的:

<navigator v-for="(na,index) in navigator_text" :key="index" class="RiChang" 
           :url="'../shopList/shopList?id='+encodeURIComponent(JSON.stringify(na.id))+'&title='+encodeURIComponent(JSON.stringify(na.text))">
</navigator>

动态设置页面的标题

不能写成:

{
    "path": "pages/shopList/shopList",
	"style": {
		"navigationBarTitleText": "美食"//固定标题
	}
}

参考官方文档(动态设置当前页面的标题)

那我们什么时候去调用这个api从而动态设置页面的标题?

刚一进入页面的时候，你就可以调用页面生命周期函数(这个api只能在onReady里面进行调用)

shopList.vue

<template>
    <view>
		
	</view>
</template>

<script>
    export default{
        name: 'shoList',
        components:{},
        data() {
            return {
                
            }
        },

        onReady(){
            uni.setNavigationBarTitle({
                title:'test'//随便改成一个动态的标题
            })
        }
    }
</script>

<style scoped>

</style>

我们如何才可以获取到呢？

我们传递过来的参数可以在onLoad()中获取到,但是onLoad()是有作用域限制的里面的接收到数据的形参options是无法被onReady()访问到。所以在多个函数之间共享某些数据的话，咱们只能将这些参数临时转存到data里面去。data里面的数据才是我们整个页面共享的

data(){
    return{
        query:{}
    }
},
onLoad(options){
	this.query = options
},

onReady(){
    uni.setNavigationBarTitle({
    	title: this.query.title
	})
}

就可以了，但是你之前用的JSON.stringify()传递数据，你就要解码(JSON.parse(this.query.title))

参考官网

// navigate.vue页面接受参数
onLoad: function (option) {
    const item = JSON.parse(decodeURIComponent(option.item));
}

所以:

onLoad(options){
    const item = JSON.parse(decodeURIComponent(options.title))
	this.query = item
},

所以如下完整的js表达式:

export default{
    name: 'shoList',
    components:{},
    data() {
        return {
            query:{}
        }
    },
    onLoad(options){
        const item = JSON.parse(decodeURIComponent(options.title))
        this.query = item
    },
    onReady(){
        uni.setNavigationBarTitle({
            title: this.query,
            success(){
                console.log('成功了')
            },
            fail(){
                console.log('失败了')
            }
		})
    }
}

之后就是要用往数据库发起请求

为例不浪费大家时间(就是自己懒)可以参考这个为大家创建数据库和Springboot用来作服务器

我这里的数据表是shop,网址输入:

http://localhost:8085/0/getShop

在这里插入图片描述
SpringBoot得到结果。

获取并渲染商铺列表的数据

列表页面的API接口:

以分页的形式,加载指定分类下商铺列表的数据:

接口地址：

http://localhost:8085/动态的id/getShop
请求方式:GET请求
请求参数:_page:表示请求第几页的数据_limit:表示每页请求几条数据

data() {
	return {
		query:{},
		shopList:[],//商铺信息
		page:1,//我们要请求第几页的数据
		pageSize:10,//每页显示多少条的数据
		total:0//当前分页下的总数据条数
	}
},

结城明日奈是我老婆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
演示案例效果并实现导航跳转(前半部分，到请求数据库为止)

演示案例效果并实现导航跳转(前半部分，到请求数据库为止)
复制链接

扫一扫

专栏目录