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