photo_uniapp/pagesA/photo/photo_1.vue

<template>
	<view>
		<view class="content photo_back">
			<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />
			<view class="photo_main" :style="'margin-top:'+margin_top+'px'">

				<view class="search_div" style="margin-top: 20rpx;">
					<view class="search_div_1">
						<image src="/static/img/common/search_icon.png" />
					</view>
					<view class="search_div_2">
						<u--input placeholder="请输入搜索内容" border="none" v-model="search_text"></u--input>
					</view>
					<view class="search_div_3" @tap="goSearch">搜索</view>
				</view>


				<view class="tabs_div">
					<u-tabs @click="changeTab()"  :current="this_tab" :list="list1" lineWidth="25" lineHeight="10"
						:lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
					        color: '#333333',
					        fontWeight: 'bold',
					        transform: 'scale(1.2)'
					    }" :inactiveStyle="{
					        color: '#333333',
					        transform: 'scale(1)'
					    }" itemStyle="padding-left: 15; padding-right:15px; height: 100rpx; width:140rpx">
					</u-tabs>
				</view>


				<scroll-view class="photo_list_div" 
				enable-flex="true" 
				scroll-y="true"
				 scroll-with-animation="true"
				 @scrolltolower="lower"
				  
				 lower-threshold="50">
					
					<view class="photo_list_div_one" v-for="(item,key) in temList"  :key="key" @tap="goThis(item.id)">
						<view class="photo_list_div_one_img"  >
						
							<image
								:src="root+item.face"
								mode="aspectFill" />
						</view>
						<view class="photo_list_div_one_text">
							{{item.title}}
						</view>
					</view>
				</scroll-view>


			</view>

		</view>


	</view>
</template>

<script>
	import custom_navbar from "./components/photo_header.vue";
	export default {
		components: {
			custom_navbar

		},
		data() {
			return {
				navbar_title: 'AI写真',
				theme: "white",
				search_text: '',
				margin_top: 0,
				lineBg: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAOCAYAAABDwm71AAAAAXNSR0IArs4c6QAAAm5JREFUSEu1lD1oFEEUx39vZhOCpghikUIwkMKAjYWFEEELQdQTRfwqLGyMgsFcNDEWEbYQNB+Sw7ugdilSBDQ2tikSsFCwsBFiIVikSBEwQoRLuMzT3ds9z8vtXcjHwOzCzs57v/ef/xshGmdeaLsVUgZQYeZ9t3yN13bz/bpf2wVSYQ7DTNdQMa8Ej1RO76JkRPBQ8JS8OAbfpeX5bkLlHumAcTyxihcIAuSBvlsjMi7nc3pY4TPQFJIq2GiKY3TpF49nfQk27NjwffX25RkzSreJckVggS4FhQ5JZbVHhEwpaxlYsMk4PjYYbk6m5dtOkGUG9ZBzTFjHsUCASrAgh0I6BKMMrFyxeJN15A28susMTTyUxa0A+v3auqeRHqP0GcWLTyURLDL9fOivCHfDpljFAFCZ8oS3P38z98aXlVqQvq/N4jjhKddNcYZApYKrK5ZXw9HQ/OfG9YEoo5UeK1VTcbwhuKPwN9m8VeYNLHqO5cAnxtFs4YBxdFilw4BnXdG3teLFHgO6Q/PHFZ/N6QUDU6I0JSpWL3iVAsrsUA8sr3Cja0SmS9dF6S7LameDMmmgrW6FtSCKTVNUiVDdeootoFy+PSqfYpaSYvGHi2PaIoaXhtAT/wXcFqyrfpQCE2ur9PZmZLncrxvA4sVLWe206+SscqSqWberGHwRSN97KnPVGigRLP75akZPNzjSxnHKgrdlFYuKFQzMWMez+wlAiUeZ1P5XhrV1r+GacZy0cNwo+2s2yT+PLXmOD1aZlTWmB4ZlYTP3YF3FkoLc8bVNGjkYNUqLB82R0VeMY9kTfqw6vg/7mwOpzPMHTiZrgwPNrpsAAAAASUVORK5CYII=',
				
				
				list1: [{
					name: '女生'
				}, {
					name: '男生',
				}],
				this_tab:0,
				
				curPage: 0,
				total: 0,
				temList:[],
				root:''
	

			}
		},

		mounted() {
			//this.getScreenSize();
			//initListHeight(), ;
		},
		
		onLoad(){
			this.getList();
			this.root = this.$api.getOssurl();
		},
		
		methods: {
			lower(){
				console.log('this is lower')
				this.loadMore();
			},
			
			
			loadMore() {
			
				let isLoad = Math.ceil(this.total / 10) > this.curPage;
				if (isLoad) {
					this.getList();
				}
			},
			
			getNavHeight(e) {
				this.margin_top += e;
			},
			goSearch() {
				this.total =0;
				this.temList=[];
				this.curPage = 0;
				this.getList();
			},
			changeTab(e) {
				this.this_tab = e.index;
				this.total =0;
				this.temList = [];
				this.curPage = 0;
				let that = this;
				setTimeout(function(){
					that.getList();
				},500)
			},
			
			
			
			getList(){
				
				let sex = '';
				if(this.this_tab == 0){
					sex =2;
				}else{
					sex =1;
				}
				let params = {
					page: this.curPage + 1,
					limit: 10,
					type: sex,
					title:this.search_text				
				};
				
				let that = this;
				
				this.$api.get('/api/album/list',params,function(rs){
					that.curPage = rs.current_page;
					that.total = rs.total;
					
					let datas = [...that.temList];
					
					if (params.page > 1) {
						datas.push(...rs.data)
					} else {
						datas = rs.data;					
					}
					
					that.temList = datas;
					
				})
				
			
				
				
			},
			goThis(id){
				uni.navigateTo({
					url:'/pagesA/photo/photo_2?id='+id
				})
			}
			
		}
		
	}
</script>

<style lang="scss" scoped>
	@import './this.scss';

	// page {
	// 	//background-color: #E3E8FE !important;
	// }

	.photo_back {
		background-color: #E3E8FE;
		min-height: 100vh;
		width: 100%;
		top: 0;
		left: 0;
		height: 100%;
		overflow: hidden;
	}
</style>