You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
1.9 KiB
95 lines
1.9 KiB
<template>
|
|
<view>
|
|
<view class="content ">
|
|
<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />
|
|
<view class="photo_main_cartoon" :style="'margin-top:-'+margin_top+'px'">
|
|
<view class="photo_main_cartoon_head">
|
|
</view>
|
|
<view class="photo_main_cartoon_one" v-for="(item, index) in cartoonList" :key="index" :style="(index == 0? 'margin-top: -180rpx;':'')+'background: url('+item.face+') center center no-repeat; background-size: 100% auto; '">
|
|
<view class="photo_main_cartoon_one_1">{{item.title}}</view>
|
|
<view class="photo_main_cartoon_one_2" @click="goTo('/pagesA/photo/cartoon_2?id='+item.id)">
|
|
开始制作
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import custom_navbar from "./components/photo_header.vue";
|
|
export default {
|
|
components: {
|
|
custom_navbar
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
navbar_title: '卡通画风',
|
|
theme: "blue",
|
|
margin_top: 0,
|
|
cartoonList:[],
|
|
page: 1,
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
var _this = this;
|
|
_this.loadDataList();
|
|
},
|
|
onReachBottom () {
|
|
|
|
this.page++;
|
|
this.loadDataList();
|
|
|
|
},
|
|
onPageScroll(e) {
|
|
if (e.scrollTop > 50) {
|
|
this.theme = 'white';
|
|
|
|
} else {
|
|
|
|
this.theme = 'blue';
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
getNavHeight(e) {
|
|
this.margin_top += e;
|
|
},
|
|
goTo(url)
|
|
{
|
|
uni.navigateTo({
|
|
url:url,
|
|
})
|
|
},
|
|
//for loadDataList
|
|
loadDataList() {
|
|
var _this = this;
|
|
var post = {
|
|
page:_this.page,
|
|
limit:10,
|
|
};
|
|
_this.$api.get('api/cartoon/list', post, function(res) {
|
|
var d = res;
|
|
var Data = d.data;
|
|
Data.forEach((item, index) => {
|
|
Data[index].face = _this.$api.ossurl(item.face);
|
|
});
|
|
_this.cartoonList = _this.cartoonList.concat(Data);
|
|
});
|
|
},
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './this.scss';
|
|
</style> |