美食地图

uni_applet/pageA/food/fondMap.vue

@@ -1,36 +1,82 @@
 <template>
 	<view>
-		<view class="map-container">
-			<map style="width: 100%; height: 100vh;" :show-location='true' ref="map" id="map" :latitude="latitude"
-				:longitude="longitude" :markers="marker" :scale="scale" @callouttap='callouttap' v-if="mapShow">
-				<view class="cover-view">
-					<view @click="onControltap">
-						<image class="cover-image" src="@/static/image/food/dw.png"></image>
+		<map style="width: 100%; height: 100vh;" :show-location='true' ref="map" id="map" :latitude="latitude"
+			:longitude="longitude" :markers="marker" :scale="scale" @callouttap='callouttap' @regionchange='regionChange'>
+		</map>
+		<view class="floatBtn" :style="{bottom:(currentHeight+20)+'px'}" @click="onControltap">
+			<view class="header-avatar">
+			<image class="cover-image" src="@/static/image/food/dw.png"></image>
+			</view>
+		</view>
+		<bab-Touchbox :minHeight="0.25" :maxHeight="0.7" :touchHeight="40" @currentHeight="setScrollHeight"
+			@maxtHeight="setScrollViewHeight">
+			<view class="flexRow">
+				<view class="head">
+					<view v-for='item in jobs' @click="change(item)" class="item" :class="item.checked?'item-active':''">
+						{{item.iname}}
 					</view>
 				</view>
-			</map>
-		</view>
-		<!-- <view class="search" :style="{top:topHeight+'px'}">
-			<searchBar @click="search" :city="city"></searchBar>
-		</view> -->
-		<cardList :stationList="markerIdClick" v-if="tag" style="position: fixed;top: 70%;"></cardList>
-		<tabbar :current="current"></tabbar>
+			</view>
+			<scroll-view :style="{'height':scrollViewHeight - 64 +'px'}" scroll-y="true" class="info-list">
+				<view class="item" v-for="(item,index) in mapList" @click="toMap(item,index)">
+					<view class="left">
+						<image :src="item.coverImage" mode="aspectFill" class="img"></image>
+					</view>
+					<view class="right row1">
+						<view class="title">
+							{{item.shopNames}}
+						</view>
+						<view class="row2" v-if="item.label">
+							<view v-for="item1 in item.label.split(',')" class="label">
+								{{item1}}
+							</view>
+						</view>
+			
+						<view class="row3" @click.stop="toDL(item)">
+							<view class="to-here">
+								<image src="../../static/image/to.png" mode="widthFix" style="width: 36rpx;">
+								</image>
+							</view>
+							<view class="detailedAddress">
+								{{item.detailedAddress}}
+							</view>
+			
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+	<!-- 		<scroll-view :style="{'height':scrollViewHeight - 64 +'px'}" scroll-y="true">
+				<view style="background-color: #4CD964;">
+					<view><text>绿色高度(滚动区域高度) = </text><text>@maxtHeight返回值 - touchHeight值</text></view>
+					<list>
+						<cell v-for="(item, index) in 50" :key="index">
+							<text>就是个地理位置{{index+1}}</text>
+						</cell>
+					</list>
+				</view>
+			</scroll-view> -->
+		</bab-Touchbox>
 	</view>
 </template>
 
 <script>
+	var that;
 	import {
 		authorizedLocation
 	} from '@/util/util.js'
 	export default {
 		data() {
 			return {
-				mapShow: false,
+				searchKeyWord:'',
+				currentHeight: 0, // 滑动组件当前高度
+				scrollViewHeight: 0, //用于计算滚动区域高度
 				topHeight: 20,
 				tag: false,
 				latitude: '', //纬度
 				longitude: '', //经度
-				scale: 12, //缩放级别
+				movelatitude: '', //纬度
+				movelongitude: '', //经度
+				scale: 14, //缩放级别
 				current: 1,
 				marker: [],
 				pageSize: 10,
@@ -38,89 +84,168 @@
 				total: 0, // 总数据量
 				markerIdClick: [],
 				mapList: [],
+				jobs: [
+					{
+						id: 0,
+						iname: '全部',
+						checked: true
+					},
+					{
+						id: 1,
+						iname: '海鲜',
+						checked: false
+					},
+					{
+						id: 2,
+						iname: '自助',
+						checked: false
+					}, {
+						id: 3,
+						iname: '烧烤',
+						checked: false
+					},
+					{
+						id: 4,
+						iname: '火锅',
+						checked: false
+					},
+					{
+						id: 5,
+						iname: '家常菜',
+						checked: false
+					},
+					{
+						id: 6,
+						iname: '面食',
+						checked: false
+					},
+					{
+						id: 7,
+						iname: '小龙虾',
+						checked: false
+					},
+					{
+						id: 8,
+						iname: '早餐',
+						checked: false
+					}
+				],
+
 			}
 		},
-		async onLoad() {
-			this.isdingwei()
-			this.getStationList()
-			const {
-				height,
-				top
-			} = uni.getMenuButtonBoundingClientRect();
-			this.topHeight = height + top + 13
+		watch: {},
+		 onLoad(options) {
+			that = this
+			 this.isdingwei()
 		},
-		methods: {
-			isdingwei() {
-				authorizedLocation().then(res => {
-					let _obj = {}
-					if (res == '取消授权') {
-						//获取上一次，无上一次山海广场
-						let _place = uni.getStorageSync("LocationPlace")
-						if (_place && _place.latitude) {
-							_obj = {
-								latitude: _place.latitude,
-								longitude: _place.longitude
-							}
-						} else {
-							_obj = {
-								latitude: 40.22086204872,
-								longitude: 122.08338497727
-							}
-						}
 
-					} else {
-						_obj = {
-							latitude: res.latitude,
-							longitude: res.longitude
-						}
-					}
-					this.longitude = _obj.longitude
-					this.latitude = _obj.latitude
-
-				})
+		computed: {
+			windowHeight() {
+				var systemInfo = uni.getSystemInfoSync();
+				return systemInfo.windowHeight;
 			},
-			search(searchInp) {
-				console.log('search页面子向父传值', searchInp);
+			windowWidth() {
+				return uni.getSystemInfoSync().windowWidth;
+			}
+		},
+		methods: {
+			toMap(val,index){
+				console.log(this.marker)
+				console.log(val)
+				for(let i = 0;i<this.marker.length;i++){
+					if(val.id==this.marker[i].id){
+						this.marker[i].width = 30
+						this.marker[i].height = 30
+					}else{
+						this.marker[i].width = 20
+						this.marker[i].height = 20
+					}
+				}
 			},
-			regionChange() {
-				this.tag = false
-				if (this.pageNum * this.pageSize >= this.total) return
-				this.pageNum++
+			change(val){
+				this.searchKeyWord = val.iname
+				if(this.searchKeyWord=='全部') this.searchKeyWord = ''
+				for(let i = 0;i<this.jobs.length;i++){
+					if(val.iname==this.jobs[i].iname){
+						this.jobs[i].checked = true
+					}else{
+						this.jobs[i].checked = false
+					}
+				}
 				this.getStationList()
+				
+			},
+			async regionChange(e) {
+				if(e.type=="end"&&e.causedBy=='drag'){
+					console.log(e)
+					 let _centerLocation = await this.getCenterLocation()
+					this.movelongitude = _centerLocation.longitude
+					this.movelatitude = _centerLocation.latitude
+					this.getStationList()
+				}
 			},
 			//移动到当前位置
 			onControltap() {
 				uni.createMapContext("map", this).moveToLocation();
 			},
-			//气泡点击事件
-			callouttap(e) {
-				let id = String(e.detail.markerId)
-				let arr = this.mapList.find(item => {
-					return item.stationId === id
+			toDL(val) {
+				console.log(val)
+				let _latitude = val.location.split(",")[0]
+				let _longitude = val.location.split(",")[1]
+				uni.openLocation({
+					latitude: Number(_latitude),
+					longitude: Number(_longitude),
+					success: function() {
+						console.log('success');
+					},
+					fail(fail) {
+						console.log(fail)
+					},
+				});
+			},
+			getCenterLocation() {
+				return new Promise((resolve, reject) => {
+					// 获取地图中心经纬度
+					let mapObjs = uni.createMapContext("map",that)
+					mapObjs.getCenterLocation ({
+						success:function(res){
+							console.log("中心经纬度",res)
+							resolve(res)
+						},
+						fail:function(fail) {
+							reject(fail)
+						}
+					});
 				})
-				this.markerIdClick = [arr]
-				this.tag = true
 			},
 			getList() {
 				return new Promise((resolve, reject) => {
+					uni.showLoading({
+						mask:true,
+						title: '加载中'
+					})
 					this.$request.baseRequest('admin.tourism.foodInfo', 'foodList', {
 						page: 1,
-						limit: 9999,
+						limit: 100,
+						userLongitude: this.movelongitude,
+						userLatitude: this.movelatitude,
+						searchKeyWord: this.searchKeyWord,
+						searchType:2
 					}, failres => {
 						uni.showToast({
 							icon: "none",
 							title: failres.errmsg,
 							duration: 3000
 						});
-
+			
 					}).then(res => {
 						uni.hideLoading()
 						resolve(res)
 					})
 				})
 			},
-			async getStationList() {
-				console.log('发送请求前 打印用户经纬度', this.latitude, this.longitude);
+			async getStationList() {debugger
+				this.mapList = []
 				const data = await this.getList()
 				console.log('queryStationInfos，信息列表显示总数据', data);
 				this.total = data.total
@@ -132,95 +257,182 @@
 						iconPath: '/static/image/food/location.png', //显示的图标
 						latitude: Number(item.latitude),
 						longitude: Number(item.longitude),
-						label:{
-							content:item.shopNames,
-							textAlign:"left",
-							padding:-20
-						},
-						width: 30,
-						height: 30,
-						// callout: { //气泡窗口 
-						// 	content: '空闲', //文本
-						// 	color: '#ffffff',
-						// 	fontSize: 15,
-						// 	borderRadius: 15,
-						// 	padding: '10',
-						// 	bgColor: '#406390',
-						// 	display: 'ALWAYS', //常显
-						// }
+						// label: {
+						// 	content: item.shopNames,
+						// 	textAlign: "left",
+						// 	padding: -20
+						// },
+						width: 20,
+						height: 20,
+						callout: { //气泡窗口 
+							content: item.shopNames, //文本
+							// color: '#ffffff',
+							fontSize: 14,
+							// borderRadius: 15,
+							// padding: '10',
+							bgColor: 'transparent',
+							display: 'ALWAYS', //常显
+							anchorX: 32,
+							anchorY: 28
+						}
 					})
 				})
-				this.mapShow = true
 				this.mapList = this.mapList.concat(data.data.items)
 				console.log(this.marker);
-				// for (let index in obj.list) {
-				//   let stationMarker = {
-				//     iconPath: '/static/images/mapStation.png', //显示的图标 
-				//     id: Number(index) || 0,
-				//     title: this.mapList[index].stationName || '',
-				//     latitude: Number(this.mapList[index].stationLat),
-				//     longitude: Number(this.mapList[index].stationLng),
-				//     width: 30, 
-				//     height: 30, 
-				//     callout: { //气泡窗口 
-				//       content: '空闲' + this.mapList[index].totalFree, //文本
-				//       color: '#ffffff', //文字颜色
-				//       fontSize: 15, //文本大小
-				//       borderRadius: 15, //边框圆角
-				//       padding: '10',
-				//       bgColor: '#406390', //背景颜色
-				//       display: 'ALWAYS', //常显
-				//     }
-				//   }
-				//   // console.log(stationMarker, 'stationMarker');
-				//   this.marker.push(stationMarker)
-				// }
-			}
+			},
+			isdingwei() {
+				authorizedLocation().then(res => {
+					let _obj = {}
+					if (res == '取消授权') {
+						//获取上一次，无上一次山海广场
+						let _place = uni.getStorageSync("LocationPlace")
+						if (_place && _place.latitude) {
+							_obj = {
+								latitude: _place.latitude,
+								longitude: _place.longitude
+							}
+						} else {
+							_obj = {
+								latitude: 40.22086204872,
+								longitude: 122.08338497727
+							}
+						}
+			
+					} else {
+						_obj = {
+							latitude: res.latitude,
+							longitude: res.longitude
+						}
+					}
+					this.longitude = _obj.longitude
+					this.latitude = _obj.latitude
+					this.movelongitude = _obj.longitude
+					this.movelatitude = _obj.latitude
+					this.getStationList()
+			
+				})
+			},
+			setScrollHeight(val) { // 实时返回的滑动组件高度
+				this.currentHeight = val
+			},
+			setScrollViewHeight(val) { //最大高度
+				this.scrollViewHeight = val
+			},
 		}
 	}
 </script>
 
-<style scoped lang="scss">
-	/deep/ .uni-searchbar__box-search-input {
-		color: #fff !important;
+<style lang="scss" scoped>
+	.header-avatar {
+		width: 80rpx;
+		height: 80rpx;
+		background-color: #fff;
+		border-radius: 100px;
+		display: fixed;
+		align-items: center;
+		justify-content: center;
+		.cover-image {
+			width: 50rpx;
+			height: 50rpx;
+			position: absolute;
+			top: 15rpx;
+			left: 15rpx;
+		
+		}
 	}
 
-	.search {
+	.floatBtn {
 		position: fixed;
-		width: 80%;
+		right: 40rpx;
+		z-index: 10;
 	}
 
-	.map-container {
-		margin-top: -40rpx;
-		position: relative;
-		overflow: hidden;
-		border-radius: 50rpx 50rpx 0 0;
-
-		.cover-view {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			/* width: 80rpx;
-			height: 160rpx; */
-			padding: 10rpx 15rpx;
-			color: #4F575F;
-			font-weight: 400;
-			background-color: #fff;
-			background-position: center center;
-			position: absolute;
-			    bottom: 300rpx;
-			    right: 30rpx;
-			border-radius: 20rpx;
-
-
+	.flexRow {
+		
+		.head {
+			margin: 20rpx 0;
+			white-space: nowrap;
+			overflow-x: scroll;
+			width: calc(100vw - 40rpx);
+		
+			box-sizing: border-box;
+		
+			.item {
+				display: inline-block;
+				background: #e9eaec;
+				color: #566068;
+				padding: 10rpx 26rpx;
+				margin-right: 20rpx;
+				border-radius: 20rpx;
+				font-size: 24rpx;
+			}
+			.item-active {
+				display: inline-block;
+				background:#f9ae3d ;
+				color: #fff;
+				// padding: 10rpx 26rpx;
+				// margin-right: 20rpx;
+				// border-radius: 20rpx;
+				// font-size: 24rpx;
+			}
 		}
-
-		.cover-image {
-			display: inline-block;
-			width: 40rpx;
-			height: 40rpx;
-
+	}
+	.info-list {
+		// background-color: red;
+		margin-top: 20rpx;
+		width: calc(100vw - 40rpx);
+	
+		.item {
+			background: #fff;
+			border-radius: 20rpx;
+			margin-bottom: 20rpx;
+			display: flex;
+			padding: 20rpx;
+			box-sizing: border-box;
+	
+			.img {
+				width: 160rpx;
+				height: 160rpx;
+				border-radius: 30rpx;
+			}
+	
+			.right {
+				margin-left: 20rpx;
+				width: 100%;
+	
+				.title {
+					font-weight: 700;
+				}
+	
+				.row2 {
+					display: flex;
+					margin-top: 10rpx;
+	
+					.label {
+						background: #fdf6ec;
+						color: #f9ae3d;
+						border-radius: 20rpx;
+						padding: 6rpx 16rpx;
+						font-size: 24rpx;
+						margin-right: 20rpx;
+	
+					}
+				}
+	
+				.row3 {
+					position: relative;
+					display: flex;
+					width: 100%;
+					margin-top: 10rpx;
+					align-items: top;
+	
+					.detailedAddress {
+						width: 60vw;
+						overflow: hidden;
+						text-overflow: ellipsis;
+					}
+				}
+			}
 		}
 	}
-</style>
+</style>

uni_applet/pages/food/food.vue

@@ -33,9 +33,10 @@
 				</view>
 			</view>
 		</view>
-		<view class="tag-type">
-			<uni-tag :circle="true" v-for='item in jobs' :text="item.iname" type='' 
-				style="width: 61px;text-align: center; margin-left: 20px;" @click="change(item)" />
+		<view class="tag-type head">
+			<view v-for='item in jobs' @click="change(item)" class="item" :class="item.checked?'item-active':''">
+				{{item.iname}}
+			</view>
 		</view>
 		<scroll-view scroll-x="true" scroll-with-animation="true" class='list-type'>
 			<view v-for='item in searchTypes' @click='changetype(item)'
@@ -47,7 +48,8 @@
 				<view class='findItem' v-for='item in findList' @click="toShop(item)">
 					<view style='align-items: flex-start;' class='flex'>
 						<view style='width:100vw;' class="left flex">
-							<view v-for='item1 in item.foodDishesInfoList' @click.stop='previewImg(item1)' style='margin:10rpx;'>
+							 <!-- @click.stop='previewImg(item1)' -->
+							<view v-for='item1 in item.foodDishesInfoList' style='margin:10rpx;'>
 								<u--image  radius='4' :showLoading="true" :src="item1.dishImage" width="80px"
 									height="80px"></u--image>
 							</view>
@@ -161,6 +163,21 @@
 						id: 5,
 						iname: '家常菜',
 						checked:false
+					},
+					{
+						id: 6,
+						iname: '面食',
+						checked: false
+					},
+					{
+						id: 7,
+						iname: '小龙虾',
+						checked: false
+					},
+					{
+						id: 8,
+						iname: '早餐',
+						checked: false
 					}
 				],
 				upOption: {
@@ -318,12 +335,13 @@
 				this.mescroll = mescroll;
 			},
 			downCallback() {
-				if (uni.getStorageSync("userInfo").phone) {
-					this.mescroll.resetUpScroll()
-				} else {
-					that.mescroll.endBySize(0, 0)
-					this.showAuthorizePhone = true
-				}
+				this.mescroll.resetUpScroll()
+				// if (uni.getStorageSync("userInfo").phone) {
+				// 	this.mescroll.resetUpScroll()
+				// } else {
+				// 	that.mescroll.endBySize(0, 0)
+				// 	this.showAuthorizePhone = true
+				// }
 
 			},
 			getDistance(latitude, longitude) {
@@ -530,7 +548,24 @@
 	// 	opacity: 0.5;
 	// 	margin-right: 56rpx;
 	// }
-
+	.head{
+		white-space: nowrap;
+		overflow-x: scroll;
+		padding-left: 20rpx;
+		width: calc(100vw);
+				
+		box-sizing: border-box;
+		
+			.item {
+				display: inline-block;
+				background: #e9eaec;
+				color: #566068;
+				padding: 10rpx 26rpx;
+				margin-right: 20rpx;
+				border-radius: 20rpx;
+				font-size: 24rpx;
+			}
+	}
 	.tag-type {
 		.text{
 			border-radius: 4px;

uni_applet/uni_modules/bab-Touchbox/changelog.md

@@ -0,0 +1,17 @@
+## 1.0.5（2022-03-01）
+增加示例项目，方便使用。如果有自定义需要，使用者直接copy原文件更改即可，无需作者授权。
+在连续滑动情况下可能会伴随卡顿，框架问题，无法解决 = ="
+## 1.0.4（2022-01-18）
+注释取消
+## 1.0.3（2022-01-18）
+新增微信小程序支持，并更新readme
+## 1.0.2（2022-01-14）
+更新readme
+## 1.0.1（2022-01-14）
+默认滑动区域更改为全部可滑动
+## 1.0.0（2022-01-14）
+新增可指定最低、最高高度；
+新增圆角设置；
+新增可指定可滑动区域；
+可指定是否显示顶部横线；
+丝滑般顺滑~~

uni_applet/uni_modules/bab-Touchbox/components/bab-Touchbox/bab-Touchbox.vue

@@ -0,0 +1,165 @@
+<template>
+	<view>
+		<view :class="isend?'fixedbox2' :'fixedbox'"
+			:style="{'height':windowHeight + 'px','width':windowWidth + 'px','top':fixboxtop +'px','border-top-left-radius':radius,'border-top-right-radius':radius}"
+			@touchmove="getstart($event)" @tap="tap" @touchend="getend" ref="fixbox">
+			<view class="content" :style="{'height':windowHeight + 'px'}">
+				<view class="tapBoxTouchLine" v-if="showLine">
+					<view class="line"></view>
+				</view>
+				<slot />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * tapBox 触摸上拉组件
+	 * @description 触摸上拉组件，类似于高德美团上拉组件
+	 * @property {String} radius 左上右上圆角
+	 * @property {Number} minHeight 最低高度 占总屏幕高度占比
+	 * @property {Number} minHeight 最高高度 占总屏幕高度占比
+	 * @property {Number} touchHeight 允许滑动区域高度默认顶部横线高度 0为任意区域可滑动，单位rpx
+	 * @property {Boolean} showLine 上否显示顶部滑动线
+	 * @event {Function} tap 点击事件
+	 * @event {Function} getstart 开始滑动时触发事件
+	 * @event {Function} getend 滑动结束事件
+	 */
+	export default {
+		name: "tapBox",
+		data() {
+			return {
+				windowHeight: 0, // 屏幕高度
+				windowWidth: 0, // 屏幕宽度
+				firsttop: 0, // 默认高度
+				fixboxtop: 0, // 实际高度
+				phonetop: 200, // 默认滑动分界线 - 后面计算为最低与最高的一半
+				isend: false, // 触摸结束
+				isfirst: true, // 手指第一次触摸
+				tapboxtop: 0, // 手指距离顶部距离
+			};
+		},
+
+		props: {
+			radius: {
+				type: String,
+				default: '0'
+			},
+			minHeight: {
+				type: Number,
+				default: 0.2
+			},
+			maxHeight: {
+				type: Number,
+				default: 0.5
+			},
+			touchHeight: {
+				type: Number,
+				default: 0
+			},
+			showLine: {
+				type: Boolean,
+				default: true
+			},
+		},
+		mounted() {
+			this.$nextTick(function() {
+				this.windowWidth = uni.getSystemInfoSync().windowWidth;
+				this.windowHeight = uni.getSystemInfoSync().windowHeight;
+				var defaultHeight = this.windowHeight * (1 - this.minHeight)
+				this.firsttop = defaultHeight
+				this.phonetop = (this.windowHeight * this.maxHeight - this.windowHeight * this.minHeight) /
+					2
+				this.fixboxtop = defaultHeight
+				this.$emit('currentHeight', (this.windowHeight - this.fixboxtop))
+				this.$emit('maxtHeight', (this.windowHeight * this.maxHeight))
+			})
+		},
+		onReady() {},
+		computed: {},
+		methods: {
+			tap(e) {
+				// console.log(e)
+			},
+			getstart(e) {
+				var screenY;
+				//#ifdef MP-WEIXIN
+				  screenY = e.touches[0].clientY;
+				  //#endif
+				//#ifndef MP-WEIXIN
+				  screenY = e.touches[0].screenY;
+				  //#endif
+				// console.log(screenY)
+				// 这里特殊处理 解决：在滑动框内如果存在滚动元素，则会出现滑动时滑动框和内部滚动同时滑的问题
+				if (this.touchHeight !== 0) {
+					if (screenY - this.fixboxtop > this.touchHeight) {
+						return false;
+					}
+				}
+				this.isend = false
+				if (this.isfirst) {
+					this.isfirst = false
+					this.tapboxtop = screenY - this.fixboxtop
+				}
+				this.fixboxtop = screenY - this.tapboxtop
+				if (this.fixboxtop > this.firsttop) { // 往下滑 不允许
+					this.fixboxtop = this.firsttop
+				} else { // 往上滑
+					if (this.fixboxtop <= this.windowHeight * (1 - this.maxHeight)) {
+						this.fixboxtop = this.windowHeight * (1 - this.maxHeight)
+					}
+				}
+				this.$emit('currentHeight', (this.windowHeight - this.fixboxtop))
+			},
+			getend() {
+				this.isend = true
+				this.isfirst = true
+				if ((this.firsttop - this.fixboxtop) <= this.phonetop) {
+					this.fixboxtop = this.firsttop
+				} else {
+					this.fixboxtop = this.windowHeight * (1 - this.maxHeight)
+				}
+				this.$emit('currentHeight', (this.windowHeight - this.fixboxtop))
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.tapBoxTouchLine {
+		margin-top: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.line {
+		margin: 0px;
+		vertical-align: middle;
+		border-bottom: 8rpx solid rgb(214, 215, 217);
+		width: 60rpx;
+		transform: scaleY(0.5);
+		border-top-color: rgb(214, 215, 217);
+		border-right-color: rgb(214, 215, 217);
+		border-left-color: rgb(214, 215, 217);
+	}
+
+	.fixedbox {
+		position: fixed;
+		left: 0;
+		background-color: #FFFFFF;
+		padding: 0 12px;
+		box-sizing: border-box;
+	}
+
+	.fixedbox2 {
+		position: fixed;
+		left: 0;
+		box-sizing: border-box;
+		background-color: #FFFFFF;
+		padding: 0 12px;
+		transition-property: top;
+		transition-duration: .8s;
+	}
+</style>

uni_applet/uni_modules/bab-Touchbox/readme.md

@@ -0,0 +1,20 @@
+# 上拉滑动框
+
+仿高德地图、美团上拉滑动框，支持NVUE、VUE、微信小程序，其它平台待测
+
+参数
+
+* @property {String} radius 左上右上圆角 例： 50rpx，默认50rpx
+* @property {Number} minHeight 最低高度 占总屏幕高度占比 例： 0.2，默认0.2
+* @property {Number} maxHeight 最高高度 占总屏幕高度占比  例：0.8，默认0.5
+* @property {Number} touchHeight 允许滑动区域高度默认顶部横线高度 0为任意区域可滑动，单位rpx  例：50  =>  50rpx，默认0
+* @property {Boolean} showLine 上否显示顶部滑动线  例：false  ，默认 true
+* @currentHeight 组件内置返回当前高度（包括滑动中）方便外部使用，例效果图中跟着滑动的；两个按钮
+* @maxtHeight 组件返回最高高度，用途：如果组件内包含滚动组件，用于计算滚动组件scroll-view高度 = maxtHeight-line -不许滚动高度；
+* 例： <scroll-view :style="{'height':maxtHeight - 100 +'px'}" scroll-y="true"></scroll-view>，此时需要配置touchHeight，不配置将会产生scroll-view和组件同时滚动BUG
+
+包含滚动效果，需配置 touchHeight
+![image](https://bab-demo.oss-cn-shenzhen.aliyuncs.com/450jh-ycai7.gif)
+
+返回当前高度给外部使用效果 高度来源currentHeight
+![image](https://bab-demo.oss-cn-shenzhen.aliyuncs.com/8vi5r-2iwx0.gif)