uview例子

目录

使用了控件

关键点

难点


做了一个列表

使用了控件

		<u-tabs :list="news_type_list" :current="current" @change="change"></u-tabs>
		<block v-for="video  in video_list">
			<u-card @tap="detail(d.postid)">
				<view slot="head" class="u-line-1 u-font-12">
					{{d.title}}
				</view>
				<view slot="body">
					<view class="u-line-3">
						{{d.digest}}
					</view>
					<image :src="d.imgsrc"></image>
				</view>
				<view slot="foot">
					{{d.ptime}}

				</view>
			</u-card>
		</block>

关键点

		data() {
			return {
				video_list: [],
				news_type_list: [{
					name: '精品视频'
				}, {
					name: '搞笑视频'
				}, {
					name: '美女视频'
				}, {
					name: '体育视频'
				}],
				current: 0,
				page: 10
			}
		},

这里page的初始值不能是0

难点

		methods: {
			load_videos_data(){
				uni.request({
					url: 'https://api.isoyu.com/api/Video/video_type?type=' + this.current +
							'&page=' + this.page,
					success: (res) => {
						console.log(JSON.stringify(res));
						//this.video_list = res.data.data
						res.data.data.map(item => {
							this.video_list.push(item)
						})
					}
				});
			},
			change(index) {
				this.current = index;
				this.video_list=[]
				this.load_videos_data()
			}
		},
		onReachBottom() {
			if(this.page>400){
				this.status="nomore"
				return
			}
			this.page = this.page+10;
			this.load_videos_data()
		},

1.返回的值是个数组,要在其中push每一项

2.导航切换,清空原有数据,重新加载,否则会显示上一个栏目的数据

3.触底,页数加10

文章详细页面

	export default {
		data() {
			return {
				article:{
					title:''
				},
				show:true,
				postid:''
			}
		},
		onLoad(data) {
			// let postid='FLOC3DLN0001899O'
			this.postid = data.postid
			this.loadArcticleData()
			
		},
		methods: {
			loadArcticleData(){
				console.log(this.postid)
				uni.request({
				    url: 'https://api.isoyu.com/api/News/new_detail?postid='+this.postid,
					method:'GET',
				    success: (res) => {
						// console.log(res)//错误,返回obj
						console.log(JSON.stringify(res))//正确
						let imgs = res.data.data.img
						let body = res.data.data.body
						imgs = JSON.parse(JSON.stringify(imgs))
						for (var i = 0; i < imgs.length; i++) {
							//解析的时候要用img标签
							let imgsrc = '<img src=\"'+imgs[i].src+'\"></img>'
							console.log(imgsrc)
							body = body.replace(imgs[i].ref, imgsrc)
						
						}
						this.article = res.data.data
						this.article.body = body
						this.show=false
						uni.setNavigationBarTitle({
						    title: res.data.data.title
						});
				    },
					fail: (res) => {
				    	console.log(JSON.stringify(res))
						this.show=false
				    },
					
				});
			},
		},
	}

传递posid

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值