uniapp/pages/siteManage/siteManage.vue

<template>
	<view class="site-wrapper">
		<!-- 筛选框start -->
		<view class="ding">
			<view class="cu-bar search bg-gray filter-section">
				<view class="search-form round bg-white">
					<text class="cuIcon-search"></text>
					<input class="" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="请输入站点名称"
					 confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-blue round">查询</button>
				</view>
			</view>
		</view>

		<!-- 筛选框end -->

		<!-- 站点列表start -->
		<view class="site-items">

			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in siteListData"
				 :key="index" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="cu-avatar round lg" style="background-image: url(../../static/site-icon.png);"></view>
					<view class="content">
						<view class="text-grey site-tit">{{item.siteName}}</view>
					</view>
					
					<view class="nav-right num">
						<view class="text-grey text-xs">
							<image src="../../static/nav-icon.png" style="width:25rpx;height:25rpx;margin-right:26rpx"></image>
						</view>
					</view>
					<view class="move">
						<view class="bg-grey">编辑</view>
						<view class="bg-red">删除</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 站点列表end
		
		<!-- 新增按钮start -->
		<view class="plus">
			<image src="../../static/plus.png" style="width:125rpx;height:125rpx"  @tap="goAddPage(type)"></image>
		</view>
		<!-- 新增按钮end -->
	</view>

</template>

<script>
	import json from '../../data/json.js';

	export default {
		data() {
			return {
				type: '0',
				siteListData: json.siteListData,
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				CustomBar: this.CustomBar,
				csListArrl: [],
				//左滑默认宽度
				delBtnWidth: 160,
			};
		},

		onLoad: function(option) {
			console.log(option.type); //打印出上个页面传递的参数。
			this.type = option.type;
			if (option.type == 1) {
				uni.setNavigationBarTitle({
					title: '站点管理'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '设备管理'
				});
			}
		},
		methods: {

			// 页面跳转
			goAddPage(type) {
				uni.navigateTo({
					url: '/pages/add/add?type='+this.type,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},


			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart < -80 ? 'left' : 'right'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}

	}
</script>

<style>

</style>