WordPress开发

uni-app渲染幻灯片数据

引言

本教程为《用WordPress与uni-app开发,包含所有源代码》系列教程之一。

全功能WordPress API接口工具已出

全功能WordPress API接口工具已出只为前端开发者的你设计,详情查看:Sliver Rest Wp api:全功能的WordPress api工具

前面我们已经用uni-app写好了前端的幻灯片样式,以及用WP写好了后端幻灯片接口,在这一节中我将讲解如何将幻灯片数据渲染到app上面。

开始

首先我们需要定一个值来接收服务端返回的数据,并且将这个数据绑定到我们的幻灯片组上,用来循环。(在index.vue文件中),代码如下:

<script>
	export default {
		//此处为该页面需要用到的数据,在项目逻辑中可以对这些数据进行改变
		data() {
			return {
				homeSlide: [], //教程uni-app渲染幻灯片数据第一步:定义值接收幻灯片数据
			}
		},
		onLoad() {
			
		},
		//此处为自定义方法
		methods: {
	
		}
	}
</script>

写方法用来请求数据(此处需要用到uni.request方法),代码如下:

<script>
	export default {
		//此处为该页面需要用到的数据,在项目逻辑中可以对这些数据进行改变
		data() {
			return {
				homeSlide: [], //教程uni-app渲染幻灯片数据第一步:定义值接收幻灯片数据
			}
		},
		onLoad() {
			
		},
		//此处为自定义方法
		methods: {
			//教程uni-app渲染幻灯片数据第二步:定义获取幻灯片数据的方法getHomeSlide()
			getHomeSlide() {
				// 用uniapp的request发起请求
				uni.request({
					url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/homeSlide.php',//接口地址
					success: (res) => {
						// 请求成功之后将幻灯片数据赋值给homeSlide
						this.homeSlide=res.post;
					}
				});
			}
		}
	}
</script>

在页面加载的时候执行该方法(这里用到uni的生命周期函数onLoad):

<script>
	export default {
		//此处为该页面需要用到的数据,在项目逻辑中可以对这些数据进行改变
		data() {
			return {
				homeSlide: [], //教程uni-app渲染幻灯片数据第一步:定义值接收幻灯片数据
			}
		},
		onLoad() {
			//教程uni-app渲染幻灯片数据第三步:执行方法getHomeSlide()
			this.getHomeSlideFunc();
		},
		//此处为自定义方法
		methods: {
			//教程uni-app渲染幻灯片数据第二步:定义获取幻灯片数据的方法getHomeSlide()
			getHomeSlideFunc() {
				var _self = this;
				// 用uniapp的request发起请求
				uni.request({
					url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/homeSlide.php',//接口地址
					success: (res) => {
						// 请求成功之后将幻灯片数据赋值给homeSlide
						_self.homeSlide=res.data.post;
					}
				});
			}
		}
	}
</script>

最后,我们在视图代码中将数据渲染出来,这里用到uni的指令:v-for

<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<!-- 一组幻灯片代码开始,用到组件swiper -->
					<!-- indicator-dots autoplay interval……:组件相关属性,具体可以查看官网说明 -->
					<swiper class="swiper" 
					indicator-dots="indicatorDots" 
					autoplay="autoplay" 
					interval="interval" 
					duration="duration"
					>
					<!-- 教程uni-app渲染幻灯片数据第三步:渲染数据 -->
						<swiper-item v-for="(item , index) in homeSlide" :key="index">
							<!-- uni img组件 src绑定值为服务端返回的数据中的文章缩略图 -->			
							<image :src="item.img" mode=""></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

此刻,你在浏览器中打开项目,就能看到以下结果:

再微调一下样式就更完美了,在<style></style>中写入你的样式代码,这里我写:

<style>
	/* 将这组幻灯片中的子项目改成我们设计图中的灰色 */
	swiper-item {
		background-color: #f8f8f8;
	}
	/* 教程uni-app渲染幻灯片数据最后一步:美化 */
	swiper-item image{
		width: 100%;
	}
</style>

结束

好了,app的幻灯片至此就开发完了,在该功能中重点就是uni自己的一些函数,比如说发送请求,比如手生命周期函数等等,不过感觉还是挺简单的,看看官方文档再看看我的代码,你应该能写出自己想要的幻灯片。

代码仓库: https://github.com/sliverRing/uniApp-WPApp

用WordPress与uni-app开发,包含所有源代码 用WordPress与uni-app开发,包含所有源代码 引言 废话不多说这套系列的教程就是教你怎么将自己现有的WP网站做成一个app或者小程序 技术栈要求 需要声明的是,在这套教程之中,因为精力有限的关系,我不负责任何前端页面的设计以及开发,只讲前端... 2019-6-14 5862 0

QQ交流群: 824144151

此为本站官方星球,加入此星球可以获得以下专属权利:

  1. 得到官方任何WordPress方面的问题解答(包括WordPress建站疑问、WordPress使用问题、WordPress主题或插件bug)
  2. 可以随意下载以及更新官方发布的插件、主题(如有特别说明除外)
  3. 可以得到官方人员的免费技术援助(包括但不仅限于:WordPress、UNI、IONIC、React Native 、flutter、建站)
  4. 可以查看所有官方插件、主题的使用文档
  5. 可以得到官方插件、模板的免费技术援助
  6. 免费查看官网推出的所有教程并得到技术援助
  7. 免费得到WordPress建站建议、优化建议(大数据,大存储,高并发)
  8. 更多权利待添加……

发表评论

插入图片

推荐文章

  1. 抱歉,没有找到文章!

WordPressApp来了

快速让你的网站变成一个APP,不需要任何技术,点此查看