uniapp小视频项目：同城列表页面

Errol_King

已于 2022-04-30 23:29:33 修改

阅读量1k

点赞数

分类专栏： uni-app快速上手文章标签：前端 uniapp

于 2022-03-15 15:06:34 首次发布

本文链接：https://blog.csdn.net/u010356768/article/details/123476269

版权

uni-app快速上手专栏收录该内容

24 篇文章 21 订阅

订阅专栏

文章目录

1、同城列表

先看效果：
在这里插入图片描述

新建 city.vue 页面

<template>
	<view class="city">
		<first-nav></first-nav>
		<city-content></city-content>
		<tab></tab>
	</view>
</template>

<script>
	import tab from '../../components/tab.vue'
	import firstNav from '../../components/first-nav.vue'
	import cityContent from '../../components/cityContent.vue'

	export default {
		components:{
			tab,
			firstNav,
			cityContent
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.city{
	width: 100%;
	height: 100%;
	background: #000000;
}
</style>

为了方便调试，可以把 page.json 里的顺序改到第一个，这样运行时可以直接看到效果

新建 cityContent.vue 显示同城视频

<template>
	<view class="cityContent">
		<view class="location">
			<view class="iconfont icon-dingwei location-left">
				自动定位：北京
			</view>
			<view class="location-right">
				切换<text class="iconfont icon-right-1-copy"></text>
			</view>
		</view>
		<view class="video-list">
			<view class="item">
				<view class="video">
					<video style="width: 100%;height: 100%;object-fit:fill ;"
					src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" 
					controls=""></video>
				</view>
				<view class="img-box">
					<image class="img" src="../static/profile.webp"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"cityContent",
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.cityContent{
	width: 100%;
	background: #000000;
}
.location{
	width: 100%;
	height: 40px;
	padding-top: 60px;
	overflow: hidden;
	color: #aaaaaa;
}
.location-right{
	float: right;
	font-size: 13px;
	padding-right: 15px;
}
.location-left{
	float: left;
	font-size: 13px;
	padding-left: 15px;
}
.video-list{
	width: 100%;
	overflow: auto;
	background: #000000;
}
.item{
	width: 50%;
	float: left;
	position: relative;
}
.video{
	width: 92%;
	height: 300px;
	margin-left: 4%;
	z-index: 18;
}
.img-box{
	position: absolute;
	bottom: 7px;
	right: 15px;
}
.img{
	width: 30px;
	height: 30px;
	border-radius: 50px;
}
</style>

多复制几个 <view class="item">...</view> 发现会遮挡 tab，所以给.video增加了 z-index: 18;，然后打开之前写的 tab.vue 增加

.tab{
	......
	z-index: 20;
}

其中的定位和向右箭头的小图标依旧是在 iconfont 上下载的，之前的文章使用iconfont已经介绍过，不再赘述

2、选择城市页面

①、先做头部效果
在这里插入图片描述

创建选择城市页面 changeCity.vue ，为了方便调试，可以把 page.json 里的顺序改到第一个，这样运行时可以直接看到效果

<template>
	<view>
		<change-header></change-header>
	</view>
</template>

<script>
	import changeHeader from '../../components/changeHeader.vue'
	export default {
		components:{
			changeHeader
		},
		......
	}
</script>
......

新建 changeHeader.vue

<template>
	<view>
		<view class="changeHeader">
			<view class="iconfont icon-guanbi left"></view>
			<view class="title">切换城市</view>
		</view>
		<view class="ground"></view>
	</view>
</template>

<script>
	export default {
		name: "changeHeader",
		data() {
			return {

			};
		}
	}
</script>

<style>
	.changeHeader {
		width: 100%;
		height: 80px;
		line-height: 80px;
		position: fixed;
		top: 0;
		left: 0;
		margin: 0 auto;
		background: #000000;
	}

	.ground {
		width: 100%;
		height: 80px;
	}

	.left {
		position: absolute;
		top: 0;
		left: 15px;
		height: 80px;
		line-height: 80px;
		color: #666666;
		font-size: 18px;
	}

	.title {
		font-size: 17px;
		text-align: center;
		color: #ffffff;
	}
</style>

②、然后继续写城市列表，接着完成当前城市展示，先看效果图
在这里插入图片描述

<template>
	<view class="changeList">
		<view class="box">
			<view class="title">
				<icon class="iconfont icon-dingwei"></icon>
				当前城市
			</view>
			<view class="currentCity">北京</view>
		</view>
		<view class=""></view>
		<view></view>
	</view>
</template>

<script>
	export default {
		name:"changeList",
		data() {
		}
	}
</script>

<style>
.changeList{
	width: 100%;
	background: #000000;
}
.box{
	background: #222222;
	margin-top: 10px;
	padding: 0 5px 20px 5px;
}
.title{
	height: 40px;
	line-height: 40px;
	margin-left: 15px;
	color: #ffffff;
	font-size: 14px;
}
.currentCity{
	color: #AAAAAA;
	font-size: 15px;
	margin-left: 15px;
	height: 30px;
	line-height: 30px;
}
</style>

由于有当前城市展示有 margin-top，会露出后边的颜色，我们可以修改 changeCity.vue 的 .city样式，增加一个黑色背景

.city{
	width: 100%;
	background: #000000;
}

③、完成热门城市列表

先看效果图：
在这里插入图片描述

<template>
	<view class="changeList">
		......
		<view class="box">
			<view class="title">
				热门城市
			</view>
			<view class="hotList">
				<view class="item" v-for="(item,index) of list" :key="index">
					{{item}}
				</view>
			</view>
		</view>
		<view></view>
	</view>
</template>

<script>
	export default {
		name:"changeList",
		data() {
			return {
				list:['深圳','北京','上海','成都','广州','重庆','西安','武汉','苏州','杭州','郑州','南京']
			};
		}
	}
</script>

<style>
......
.hotList{
	width: 100%;
	overflow: hidden;
}
.item{
	width: 30%;
	height: 28px;
	line-height: 28px;
	font-size: 13.5px;
	float: left;
	background: #333333;
	margin-left: 2.5%;
	margin-bottom: 10px;
	text-align: center;
	color: #AAAAAA;
}
</style>

④、城市列表

先看效果图：
在这里插入图片描述

准备一个 city.json，内容为：
在这里插入图片描述
可以直接去我的网盘下载这个 json 文件，然后放到本地服务器

提取码：5s4z

在 changeCity.vue 页面请求到这个 json 数据，打印，格式如下：
在这里插入图片描述
拿到这个数据后，赋值给变量，传给 change-list 组件即可，思路说完了，代码如下：

<template>
	<view class="city">
		<change-header></change-header>
		<change-list :city="city)"></change-list>
	</view>
</template>

<script>
	import changeHeader from '../../components/changeHeader.vue'
	import changeList from '../../components/changeList.vue'
	export default {
		components: {
			changeHeader,
			changeList
		},
		data() {
			return {
				city: []
			}
		},
		methods: {
			getCityInfo() {
				uni.request({
					url: 'http://127.0.0.1:8080/downloads/city.json',
					success: (res) => {
						this.city = res.data.city
					}
				})
			}
		},
		created() {
			this.getCityInfo()
		}
	}
</script>

<style>
	.city {
		width: 100%;
		background: #000000;
	}
</style>

changeList.vue 中使用 props 接收，然后用 v-for 渲染

<template>
	<view class="changeList">
		......
		<view class="box-list" v-for="(cities,index) in city" :key="index">
			<view class="initial">
				{{cities.initial}}
			</view>
			<view class="city_name" v-for="item of cities.list" :key="cities.initial">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['city'],
		name:"changeList",
		data() {
			return {
				list:['深圳','北京','上海','成都','广州','重庆','西安','武汉','苏州','杭州','郑州','南京']
			};
		}
	}
</script>

......

可以看到第一层循环我们使用了 v-for in，这里解释下：
VUE列表渲染 FOR-IN 和 FOR-OF 的区别

V-for 循环遍历数组时推荐使用 of，语法格式为(item，index)
item:迭代时不同的数组元素的值
index:当前元素的索引
V-for循环遍历对象时推荐使用 in，语法格式为(item,name,index)
item:迭代时对象的键名键值
name:迭代时对象的键名
index:当前元素的索引
-在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致
-v-for也可以在实现了可迭代协议的值上使用，包括原生的Map和Set

3、字母表布局

在这里插入图片描述
修改 changeCity.vue ，增加一个字母表布局，引入

<template>
	<view class="city">
		<change-header></change-header>
		<change-list :city="city"></change-list>
		<change-alphabet :city="city"></change-alphabet>
	</view>
</template>

<script>
	......
	import changeAlphabet from '../../components/changeAlphabet.vue'
	export default {
		components: {
			......
			changeAlphabet
		},
......

增加字母表组件 changeAlphaBet.vue

<template>
	<view class="changeAlphaBet">
		<view class="list" v-for="(item,index) of city" :key="index">
			<view class="item">{{item.initial}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["city"],
		name:"changeAlphabet",
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.changeAlphaBet{
	position: fixed;
	top: 150px;
	right: 0px;
	z-index: 20;
	color: #ffffff;
}
.list{
	width: 30px;
}
.item{
	text-align: center;
	line-height: 15px;
	font-size: 12px;
}
</style>

同时需要修改 changeList.vue 的样式，因为会挡住字母表布局，所以增加 z-index 比字母表的小即可

.changeList{
	width: 100%;
	background: #000000;
	z-index: 19;
}

4、城市联动

现在要做的功能是点击右侧字母，跳转相应字母表的城市。首先给字母表增加点击事件，拿到点击的字母，然后传给城市列表组件

字母表组件 change-alphabet 和城市列表组件 change-list 都在 changeCity.vue 中，属于同级组件，所以 change-alphabet 可以先把值穿给父组件 changeCity.vue，然后再由父组件向子组件 change-list 传值
在这里插入图片描述
首先子组件（ change-alphabet ）向父组件（changeCity.vue）传值，这里同时给字母表增加了一个点击变大的效果

<template>
	<view class="changeAlphaBet">
		<view class="list" 
		v-for="(item,index) of city" :key="index"
		@click="click(item.initial)">
			<view class="item" hover-class="hover">{{item.initial}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		......
		methods:{
			click(res){
				this.$emit('change',res)
			}
		}
	}
</script>

<style>
......
.item{
	text-align: center;
	line-height: 15px;
	font-size: 12px;
	color: #ffffff;
}
.hover{
	text-align: center;
	line-height: 15px;
	font-size: 18px;
	color: #ffffff;
}
</style>

父组件（changeCity.vue）接收值，同时向子组件（change-list）传值

<template>
	<view class="city">
		<change-header></change-header>
		<change-list :city="city" :letter="letter"></change-list>
		<change-alphabet :city="city" @change="change"></change-alphabet>
	</view>
</template>

<script>
	......
	export default {
		......
		data() {
			return {
				......
				letter:[]
			}
		},
		methods: {
			......
			change(res){
				this.letter = res
			}
		},
		......
	}
</script>
......

子组件（change-list）接收值

......
<script>
	export default {
		props:['city','letter'],
		......
		watch:{
			letter(){
				console.log("字母"+this.letter);
			}
		}
	}
</script>
......

这样城市列表就接收到了点击的字母
在这里插入图片描述
下面需要跳转相应字母的城市，这就用到了 scrollview，修改 changeAlphabet.vue

<template>
	<view class="changeList">
		<scroll-view class="scrolly" scroll-y="true" :scroll-into-view="viewId">
			<view class="city-box">
				......
				<view class="box-list" v-for="(cities,index) in city" :key="index">
					<view class="initial" :id="cities.initial">
						{{cities.initial}}
					</view>
					<view class="city_name" v-for="item of cities.list" :key="cities.initial">
						{{item.name}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		......
		data() {
			return {
				......
				viewId:''
			};
		},
		watch:{
			letter(){
				this.viewId = this.letter
			}
		}
	}
</script>

<style>
.changeList{
	width: 100%;
	background: #000000;
	z-index: 19;
	height: 100%;
}
......
.scrolly{
	height: 100%;
}
</style>

把之前写的所有 view 放到一个 scrollview 中，设置它为垂直方向滚动

scroll-into-view的值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素。我们设置它的值为 viewId，初始值为空。然后当传过来的字母发生变化时，再更新

下面设置 :id="cities.initial"，也就是 id 为首字母，这样就完成了城市联动

另外样式需要改一下，changeCity.vue 样式修改一下，高度设置成 100%

.city {
		width: 100%;
		background: #000000;
		height: 100%;
	}

查看效果：
在这里插入图片描述

5、字母表滑动选择

给字母表增加触摸事件，当触摸移动时，判断移动到了哪个字母，然后执行刚才写好的城市联动功能即可

增加一个变量 touch，当触摸开始（touchStart）赋值 true，触摸结束（touchEnd）赋值 false，触摸移动时（touchMove），我们打印一下参数

touchMove(e) {
	console.log(e);		
},

打印结果：
在这里插入图片描述
其中的changedTouches中的 pageY 是手指距离顶部的距离，由于字母组件有一个样式是

top: 150px;

所以 pageY - 150 就是手指距离字母表的就，然后除以每个字母的高度，向下取整，即可拿到字母索引

<template>
	<view class="changeAlphaBet">
		<view class="list" v-for="(item,index) of city" :key="index" @click="click(item.initial)"
			@touchstart="touchStart" 
			@touchmove="touchMove" 
			@touchend="touchEnd">
			<view class="item" hover-class="hover">{{item.initial}}</view>
		</view>
	</view>
</template>

<script>
	var time = null;
	export default {
		props: ["city"],
		name: "changeAlphabet",
		data() {
			return {
				touch: false
			};
		},
		methods: {
			click(res) {
				this.$emit('change', res)
			},
			touchStart() {
				this.touch = true
			},
			touchMove(e) {
				clearTimeout(time)
				//增加定时器避免短时间重复执行
				time = setTimeout(()=>{
					if (this.touch) {
						const touchY = e.changedTouches[0].pageY - 150
						const index = Math.floor(touchY / 15)
						if (index >= 0 && index < this.city.length) {
							this.$emit('change', this.city[index].initial)
						}
					}
				})
			},
			touchEnd() {
				this.touch = false
			}
		}
	}
</script>
......

最终效果
在这里插入图片描述

6、页面跳转

在这里插入图片描述

把 pages.json 中的 index 放到第一位，然后我们给首页的同城中增加跳转功能

修改 first.nav，点击同城应跳到同城页面（city）

<view class="middle">
	<navigator open-type="switchTab" class="text" url="/pages/index/index">推荐</navigator>
	<navigator open-type="navigate" class="text" url="/pages/city/city">同城</navigator>
</view>

修改 cityContent.vue，点击切换，应跳转切换城市页面（changeCity）

<navigator open-type="" url="/pages/changeCity/changeCity" 
			class="location-right">
	切换<text class="iconfont icon-right-1-copy"></text>
</navigator>

修改 changeHeader.vue ，点击❌返回上一页

<navigator open-type="navigateBack" class="iconfont icon-guanbi left"></navigator>

查看跳转效果

7、切换城市功能

当点击一个城市的时候，切换城市页面和同城页面选择的城市应该也发生变化。我们可以这样实现，当点击一个城市的时候，将城市加入缓存

修改 chagneList.vue ，把当前城市改成插值表达式 tcity，默认是北京，点击城市后存入缓存，同时修改 tcity 的值

<template>
	<view class="changeList">
		<scroll-view class="scrolly" scroll-y="true" :scroll-into-view="viewId">
			<view class="city-box">
				<view class="box">
					<view class="title">
						<icon class="iconfont icon-dingwei"></icon>
						当前城市
					</view>
					<view class="currentCity">{{tcity}}</view>
				</view>
				......
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: ['city', 'letter'],
		name: "changeList",
		data() {
			return {
				......
				tcity:'北京'
			};
		},
		......
		methods: {
			click(res) {
				uni.setStorage({
					key: "city",
					data: res
				})
				uni.getStorage({
					key: "city",
					success: (res) => {
						this.tcity = res.data
					}
				})
				uni.redirectTo({
					url:'/pages/city/city'
				})
			}
		}
	}
</script>
......

然后在 city.vue 中接收到城市的值，然后传给 city-content

<template>
	<view class="city">
		<first-nav></first-nav>
		<city-content :tcity="tcity"></city-content>
		<tab></tab>
	</view>
</template>

<script>
	......

	export default {
		......
		data() {
			return {
				tcity:"北京"
			}
		},
		......
		onShow() {
			uni.getStorage({
				key:"city",
				success:(res)=>{
					this.tcity = res.data
				}
			})
		}
	}
</script>
......

city-content.vue 中接收

<view class="iconfont icon-dingwei location-left">
自动定位：{{tcity}}
</view>

<script>
	export default {
		props:['tcity'],
		name:"cityContent",
		data() {
			return {
			};
		}
	}
</script>
......