uniapp底部筛选

淩亂°似流年 2022-09-09 06:52 201阅读 0赞

<template>
    	<view class="bottom">
    		<view v-if="!issingle" class="bottomscreen" :style="{'margin-top': sysheight+'px'}">
    			<view class="bottomscreen_left" @click="selectleft">{ { content1}}<text class="iconfont icon-xiangxia"></text></view>
    			<view class="bottomscreen_hr"></view>
    			<view class="bottomscreen_right" @click="selectright">{ { content2}}<text class="iconfont icon-xiangxia"></text></view>
    		</view>
    		<view v-else class="bottomscreen" :style="{'margin-top': sysheight+'px'}">
    			<view class="bottomscreen_left" @click="selectleft">{ { content1}}<text class="iconfont icon-xiangxia"></text></view>
    			 
    		</view>
    	</view>
    	 
    </template>
    
    <script>
    	const  sysinfo =uni.getSystemInfoSync();
    	export default { 
    		name: "bottomscreen",
    		props:{ 
    			content1:{ 
    				type:String,
    				default:"筛选分类"
    			},
    			content2:{ 
    				type:String,
    				default:"筛选日期"
    			},
    			issingle:{ 
    				type:Boolean,
    				default:false
    			}
    		},
    		data() { 
    			return { 
                     sysheight:sysinfo.screenHeight-130
    			};
    		},
    		methods:{ 
    			selectleft(){ 
    				this.$emit('selectleft');
    			},
    			selectright(){ 
    				this.$emit('selectright');
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
    	.bottom{ 
    		 position: fixed; 
    		  width: 100%; 
    		  z-index: 999;
    		  height: 0px;
     
    		.bottomscreen { 
    				display: flex; 
    				font-size: 13px;  
    				letter-spacing: 1px; 
    				box-shadow: $box-shadow;
    				background-color: #F8F8F8;
    				justify-content: space-evenly; 
    				 height: 100px;
    				line-height: 50px;		
    				.bottomscreen_left {  
    					 
    					text { 
    						margin-left: 5px;
    						vertical-align: middle;
    					}
    				}
    		
    				.bottomscreen_hr { 
    					width: 1px;
    					height: 15px;
    					margin-top: 18px;
    					background-color: #3B3B3B;
    				}
    		
    				.bottomscreen_right { 
    					text { 
    						margin-left: 5px;
    						vertical-align: middle;
    					}
    				}
    			}
    		
    	}
    </style>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5L2g55qE576O77yM6K6p5oiR55e06L-3_size_7_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5L2g55qE576O77yM6K6p5oiR55e06L-3_size_7_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/06a90091788a43dfa6cc304a4bbfba69.png