dreamland/pages/dream/view.vue

<template>
	<gracePage :customHeader="false">
		<view class="container" slot="gBody">
			<swiper class="swiper" @change="change" :circular="swiper.circular">
				<swiper-item v-for="(v, k) in fetch.items" v-if="v.data">
					<scroll-view scroll-y="true" class="scroll-height">
						<dream :item="v" :config="config" class="item"></dream>
						<view class="page-num" v-if="swiper.index != -1">P{{swiper.index+1}}</view>
					</scroll-view>
				</swiper-item>
			</swiper>

		</view>
	</gracePage>
</template>
<script>
import gracePage from "@/lib/graceUI/components/gracePage.vue";
import dream from "@/pages/dream/view/dream.vue";
var graceRichText = require("@/lib/graceUI/jsTools/richText.js");
export default{
	data() {
		return {
			id : 1,
			swiper : {
				index : 0,
				circular : false,
			},
			fetch: {
				items : []
			},
			config : {
				//记录当前第几页
				page : 1,
				//记录哪个页面需要停止
				stop : [],
			}
		}
	},
	onLoad(option) {
		this.id = option.id;
		this.getData();
	},
	// 下拉刷新
	onPullDownRefresh: function() {
		this.getData();
	},
	// 重新加载
	onPullDownRefresh: function() {
		this.getData();
	},
	methods:{
		change : function(e) {
			this.swiper.index = e.detail.current;
			this.config.page = this.swiper.index + 1;
			if (this.config.stop.length) {
				var i = 0;
				for (i in this.config.stop) {
					if (this.config.page == i) {
						this.config.stop[i].start();
					} else {
						this.config.stop[i].stop();
					}
				}
			}
		},
		view : function() {
			this.Dever.location('dream/view?id=1');
		},
		getData : function() {
			this.Dever.get(this, 'app/collection/?l=api.getContent', {id:this.id});
		}
	},
	components:{
		gracePage,dream
	}
}
</script>
<style>
.container {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
.swiper {
	width: 750rpx;
	height: 100%;
}
swiper-item>view{
  height: 100%;
}
swiper-item image{
  width: 750rpx;
  height: 100%;
}
.scroll-height {
	height:100%;
}

.page-num {
  position: fixed;
  right: 30rpx;
  bottom: 30rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 80rpx;
  color: #fff;
  font-size: 30rpx;
  line-height: 80rpx;
  text-align: center;
  z-index: 200;
}


</style>