细节优化
gongfuxiang
parent
88d20a3b9c
commit
4857a9a0cc
|
|
@ -270,4 +270,31 @@
|
|||
right: -1px;
|
||||
padding: 5rpx 20rpx;
|
||||
box-shadow: -1px 1px 3px rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
/**
|
||||
* 多商户 - 数据列表
|
||||
*/
|
||||
.plugins-shop-data-list .item {
|
||||
|
||||
}
|
||||
.plugins-shop-data-list .item .logo {
|
||||
width: 120rpx;
|
||||
height: 120rpx !important;
|
||||
}
|
||||
.plugins-shop-data-list .item .right-content {
|
||||
width: calc(100% - 190rpx);
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
.plugins-shop-data-list .item .auth-icon {
|
||||
background-color: #f4c985;
|
||||
border: 1px solid #e7ba77;
|
||||
color: #856651;
|
||||
padding: 2rpx 12rpx;
|
||||
}
|
||||
.plugins-shop-data-list .item .desc {
|
||||
color: #888;
|
||||
font-size: 24rpx;
|
||||
min-height: 72rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<view>
|
||||
<view v-if="(data_list || null) != null && data_list.length > 0" class="plugins-realstore-data-list oh">
|
||||
<block v-for="(item, index) in data_list" :key="index">
|
||||
<view class="item bg-white padding-main border-radius-main pr spacing-mb" :data-value="'/pages/plugins/realstore/detail/detail?id='+item.id" @tap="url_event">
|
||||
<view class="item bg-white padding-main border-radius-main pr spacing-mb" :data-value="item.url" @tap="url_event">
|
||||
<view class="base oh">
|
||||
<!-- 基础内容 -->
|
||||
<image :src="item.logo" mode="widthFix" class="logo circle fl br"></image>
|
||||
|
|
@ -43,8 +43,7 @@
|
|||
</view>
|
||||
</template>
|
||||
<script>
|
||||
const app = getApp();
|
||||
|
||||
const app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -74,6 +73,7 @@
|
|||
this.setData({
|
||||
data_list: value
|
||||
});
|
||||
this.data_list_handle();
|
||||
}
|
||||
},
|
||||
// 页面被展示
|
||||
|
|
@ -82,8 +82,20 @@
|
|||
data_list: this.propDataList,
|
||||
favor_user: this.propFavorUser
|
||||
});
|
||||
this.data_list_handle();
|
||||
},
|
||||
methods: {
|
||||
// 数据列表处理
|
||||
data_list_handle() {
|
||||
var temp_data_list = this.data_list;
|
||||
for(var i in temp_data_list) {
|
||||
temp_data_list[i]['is_favor'] = (this.favor_user.indexOf(temp_data_list[i]['id']) == -1) ? 0 : 1;
|
||||
}
|
||||
this.setData({
|
||||
data_list: temp_data_list
|
||||
});
|
||||
},
|
||||
|
||||
// 收藏事件
|
||||
favor_event(e) {
|
||||
if(!app.globalData.is_single_page_check()) {
|
||||
|
|
@ -128,7 +140,7 @@
|
|||
this.setData({
|
||||
data_list: temp_data,
|
||||
favor_user: temp_favor
|
||||
})
|
||||
});
|
||||
app.globalData.showToast(res.data.msg, "success");
|
||||
} else {
|
||||
if (app.globalData.is_login_check(res.data, this, 'favor_event')) {
|
||||
|
|
@ -145,21 +157,6 @@
|
|||
}
|
||||
},
|
||||
|
||||
// 搜索事件
|
||||
search_button_event(e) {
|
||||
var params = (e || null) == null ? '' : '?keywords='+e;
|
||||
uni.navigateTo({
|
||||
url: '/pages/plugins/realstore/search/search'+params
|
||||
})
|
||||
},
|
||||
|
||||
// 选择地理位置
|
||||
choose_location_event(e) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/common/open-setting-location/open-setting-location'
|
||||
});
|
||||
},
|
||||
|
||||
// 剪切板
|
||||
text_copy_event(e) {
|
||||
app.globalData.text_copy_event(e);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<view>
|
||||
<view v-if="(data_list || null) != null && data_list.length > 0" class="plugins-shop-data-list oh">
|
||||
<block v-for="(item, index) in data_list" :key="index">
|
||||
<view class="item oh border-radius-main padding-main bg-white arrow-right spacing-mb">
|
||||
<view :data-value="item.url" @tap="url_event">
|
||||
<image :src="item.logo" mode="aspectFit" class="logo circle fl br"></image>
|
||||
<view class="right-content fr">
|
||||
<view class="title fw-b text-size single-text">
|
||||
<text v-if="(propConfig.is_enable_auth || 0) == 1 && item.auth_type == 1 && (item.auth_type_name || null) != null" class="auth-icon round margin-right-xs fw-b text-size-xs tc">{{item.auth_type_name}}</text>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
<view class="desc multi-text cr-gray margin-top-sm">{{item.describe}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
const app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data_list: []
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
props: {
|
||||
propConfig: {
|
||||
type: [String,Object],
|
||||
default: null
|
||||
},
|
||||
propDataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
// 属性值改变监听
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 页面被展示
|
||||
created: function(e) {
|
||||
this.setData({
|
||||
data_list: this.propDataList
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// url事件
|
||||
url_event(e) {
|
||||
app.globalData.url_event(e);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -27,12 +27,12 @@
|
|||
* 错误提示
|
||||
*/
|
||||
.goods-item .error-msg {
|
||||
left: 104rpx;
|
||||
left: 96rpx;
|
||||
top: 78rpx;
|
||||
width: 142rpx;
|
||||
width: 160rpx;
|
||||
}
|
||||
.goods-item .error-msg text {
|
||||
padding: 2rpx 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
box-shadow: 0 2px 10px rgb(181 181 181 / 95%);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<!-- 图片 -->
|
||||
<image :class="'goods-image fl radius '+((item.is_error || 0) == 1 ? 'opacity' : '')" :src="item.images" mode="aspectFill"></image>
|
||||
<!-- 错误 -->
|
||||
<view v-if="(item.is_error || 0) == 1" class="error-msg pa tc">
|
||||
<view v-if="(item.is_error || 0) == 1" class="error-msg pa tc text-size-xs">
|
||||
<text class="cr-red tc bg-white round">{{item.error_msg}}</text>
|
||||
</view>
|
||||
</navigator>
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
<button class="bg-main br-main cr-white text-size round margin-top-xxl" type="default" size="mini" hover-class="none">去逛逛</button>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<block v-if="data_list.length == 0 && data_list_loding_status != 0">
|
||||
<component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg"></component-no-data>
|
||||
|
|
|
|||
|
|
@ -211,15 +211,15 @@
|
|||
</view>
|
||||
|
||||
<!-- 多商户 -->
|
||||
<view v-if="plugins_shop_data != null" class="plugins-shop-container oh border-radius-main padding-main bg-white arrow-right spacing-mb">
|
||||
<view :data-value="'/pages/plugins/shop/detail/detail?id=' + plugins_shop_data.id" @tap="url_event">
|
||||
<image :src="plugins_shop_data.logo" mode="aspectFit" class="plugins-shop-logo fl radius"></image>
|
||||
<view class="plugins-shop-base column-right-view fr">
|
||||
<view class="plugins-shop-title single-text">
|
||||
<text v-if="plugins_shop_data.auth_type == 1" class="plugins-shop-auth-icon">{{plugins_shop_data.auth_type_name}}</text>
|
||||
<view v-if="plugins_shop_data != null" class="plugins-shop-data-list oh border-radius-main padding-main bg-white arrow-right spacing-mb">
|
||||
<view :data-value="plugins_shop_data.url" @tap="url_event" class="item">
|
||||
<image :src="plugins_shop_data.logo" mode="aspectFit" class="logo circle fl br"></image>
|
||||
<view class="right-content fr">
|
||||
<view class="title fw-b text-size single-text">
|
||||
<text v-if="plugins_shop_data.auth_type == 1" class="auth-icon round margin-right-xs fw-b text-size-xs tc">{{plugins_shop_data.auth_type_name}}</text>
|
||||
<text>{{plugins_shop_data.name}}</text>
|
||||
</view>
|
||||
<view class="plugins-shop-desc multi-text cr-gray margin-top-sm">{{plugins_shop_data.describe}}</view>
|
||||
<view class="desc multi-text cr-gray margin-top-sm">{{plugins_shop_data.describe}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -1053,9 +1053,14 @@
|
|||
break;
|
||||
// 门店
|
||||
case 'plugins-realstore' :
|
||||
this.setData({
|
||||
popup_realstore_status: true
|
||||
});
|
||||
var temp_data_list = this.plugins_realstore_data;
|
||||
if(temp_data_list.length == 1) {
|
||||
app.globalData.url_open(temp_data_list[0]['url']);
|
||||
} else {
|
||||
this.setData({
|
||||
popup_realstore_status: true
|
||||
});
|
||||
}
|
||||
break;
|
||||
// 默认
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
<swiper-item class="padding-right-main">
|
||||
<view class="item bg-white border-radius-main oh pr ht-auto">
|
||||
<!-- 商品主体内容 -->
|
||||
<navigator :url="'/pages/goods-detail/goods-detail?id=' + item.goods_id" hover-class="none">
|
||||
<navigator :url="item.goods_url" hover-class="none">
|
||||
<image class="goods-img dis-block" :src="item.images" mode="aspectFit"></image>
|
||||
<view class="goods-base padding-left padding-right margin-top-sm">
|
||||
<view class="goods-title multi-text margin-bottom-sm">{{item.title}}</view>
|
||||
|
|
@ -108,13 +108,31 @@
|
|||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 活动配置-楼层顶部 - 插件 -->
|
||||
<block v-if="(plugins_activity_data || null) != null">
|
||||
<component-activity-list :propConfig="plugins_activity_data.base" :propData="plugins_activity_data.data" propLocation="0" :propLabel="plugins_label_data" :propCurrencySymbol="currency_symbol"></component-activity-list>
|
||||
</block>
|
||||
|
||||
<!-- 门店 - 插件 -->
|
||||
<block v-if="(plugins_realstore_data || null) != null">
|
||||
<view class="spacing-nav-title">
|
||||
<text class="text-wrapper">{{plugins_realstore_data.base.home_data_list_title || '最新门店'}}</text>
|
||||
<navigator url="/pages/plugins/realstore/search/search" hover-class="none" class="arrow-right padding-right-xxxl cr-gray fr">更多</navigator>
|
||||
</view>
|
||||
<component-realstore-list :propDataList="plugins_realstore_data.data" :propFavorUser="plugins_realstore_data.favor_user"></component-realstore-list>
|
||||
</block>
|
||||
|
||||
<!-- 多商户 - 插件 -->
|
||||
<block v-if="(plugins_shop_data || null) != null">
|
||||
<view class="spacing-nav-title">
|
||||
<text class="text-wrapper">{{plugins_shop_data.base.home_data_list_title || '最新商家'}}</text>
|
||||
<navigator url="/pages/plugins/shop/index/index" hover-class="none" class="arrow-right padding-right-xxxl cr-gray fr">更多</navigator>
|
||||
</view>
|
||||
<component-shop-list :propConfig="plugins_shop_data.base" :propDataList="plugins_shop_data.data"></component-shop-list>
|
||||
</block>
|
||||
|
||||
|
||||
<!-- 博客-楼层顶部 - 插件 -->
|
||||
<block v-if="(plugins_blog_data || null) != null">
|
||||
<component-blog-list :propConfig="plugins_blog_data.base" :propData="plugins_blog_data.data" propLocation="0"></component-blog-list>
|
||||
|
|
@ -261,7 +279,9 @@
|
|||
import componentCopyright from "../../components/copyright/copyright";
|
||||
import componentOnlineService from "../../components/online-service/online-service";
|
||||
import componentActivityList from "../../components/activity-list/activity-list";
|
||||
import componentBlogList from "../../components/blog-list/blog-list";
|
||||
import componentBlogList from "../../components/blog-list/blog-list";
|
||||
import componentRealstoreList from "../../components/realstore-list/realstore-list";
|
||||
import componentShopList from "../../components/shop-list/shop-list";
|
||||
|
||||
var common_static_url = app.globalData.get_static_url('common');
|
||||
var static_url = app.globalData.get_static_url('home');
|
||||
|
|
@ -317,7 +337,11 @@
|
|||
// 哀悼灰度插件
|
||||
plugins_mourning_data: 0,
|
||||
// 标签插件
|
||||
plugins_blog_data: null
|
||||
plugins_blog_data: null,
|
||||
// 门店插件
|
||||
plugins_realstore_data: null,
|
||||
// 多商户插件
|
||||
plugins_shop_data: null
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -334,7 +358,9 @@
|
|||
componentCopyright,
|
||||
componentOnlineService,
|
||||
componentActivityList,
|
||||
componentBlogList
|
||||
componentBlogList,
|
||||
componentRealstoreList,
|
||||
componentShopList
|
||||
},
|
||||
props: {},
|
||||
|
||||
|
|
@ -411,7 +437,9 @@
|
|||
plugins_homemiddleadv_data: (data.plugins_homemiddleadv_data || null) == null || data.plugins_homemiddleadv_data.length <= 0 ? null : data.plugins_homemiddleadv_data,
|
||||
plugins_popupscreen_data: data.plugins_popupscreen_data || null,
|
||||
plugins_mourning_data: data.plugins_mourning_data || 0,
|
||||
plugins_blog_data: data.plugins_blog_data || null
|
||||
plugins_blog_data: data.plugins_blog_data || null,
|
||||
plugins_realstore_data: data.plugins_realstore_data || null,
|
||||
plugins_shop_data: data.plugins_shop_data || null
|
||||
});
|
||||
|
||||
// 弹屏广告插件处理
|
||||
|
|
|
|||
|
|
@ -160,20 +160,13 @@
|
|||
uni.stopPullDownRefresh();
|
||||
if (res.data.code == 0) {
|
||||
var data = res.data.data;
|
||||
var data_list = data.data_list || [];
|
||||
var favor_user = data.favor_user || [];
|
||||
if(favor_user.length > 0) {
|
||||
for(var i in data_list) {
|
||||
data_list[i]['is_favor'] = (favor_user.indexOf(data_list[i]['id']) == -1) ? 0 : 1;
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
data_base: data.base || null,
|
||||
favor_user: favor_user,
|
||||
favor_user: data.favor_user || [],
|
||||
category: data.category || [],
|
||||
slider_list: data.slider_list || [],
|
||||
icon_list: data.icon_list || [],
|
||||
data_list: data_list,
|
||||
data_list: data.data_list || [],
|
||||
is_first: 0,
|
||||
data_list_loding_status: data_list.length > 0 ? 3 : 0,
|
||||
data_bottom_line_status: true,
|
||||
|
|
|
|||
|
|
@ -206,14 +206,10 @@
|
|||
if (data.data.length > 0) {
|
||||
if (this.data_page <= 1) {
|
||||
var temp_data_list = data.data;
|
||||
for(var i in temp_data_list) {
|
||||
temp_data_list[i]['is_favor'] = (this.favor_user.indexOf(temp_data_list[i]['id']) == -1) ? 0 : 1;
|
||||
}
|
||||
} else {
|
||||
var temp_data_list = this.data_list || [];
|
||||
var temp_data = data.data;
|
||||
for (var i in temp_data) {
|
||||
temp_data[i]['is_favor'] = (this.favor_user.indexOf(temp_data[i]['id']) == -1) ? 0 : 1;
|
||||
temp_data_list.push(temp_data[i]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<image :src="shop.logo_long" mode="widthFix" class="shop-logo fl br-r padding-right-lg margin-top-xs cp"></image>
|
||||
<view class="base fr">
|
||||
<view class="shop-title single-text">
|
||||
<text v-if="((data_base.is_auth_fill_info || 0) == 1 || (data_base.is_auth_upload_pic || 0) == 1) && shop.auth_type == 1 && (shop.auth_type_name || null) != null" class="shop-auth-icon round fw-b margin-right-sm">{{shop.auth_type_name}}</text>
|
||||
<text v-if="(data_base.is_enable_auth || 0) == 1 && shop.auth_type == 1 && (shop.auth_type_name || null) != null" class="shop-auth-icon round fw-b margin-right-sm">{{shop.auth_type_name}}</text>
|
||||
<text>{{shop.name}}</text>
|
||||
</view>
|
||||
<view class="base-bottom oh margin-top-sm">
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<image :src="shop.logo_long" mode="widthFix" class="shop-logo fl br-r padding-right-lg margin-top-xs cp"></image>
|
||||
<view class="base fr">
|
||||
<view class="shop-title single-text">
|
||||
<text v-if="((data_base.is_auth_fill_info || 0) == 1 || (data_base.is_auth_upload_pic || 0) == 1) && shop.auth_type == 1 && (shop.auth_type_name || null) != null" class="shop-auth-icon round fw-b margin-right-sm">{{shop.auth_type_name}}</text>
|
||||
<text v-if="(data_base.is_enable_auth || 0) == 1 && shop.auth_type == 1 && (shop.auth_type_name || null) != null" class="shop-auth-icon round fw-b margin-right-sm">{{shop.auth_type_name}}</text>
|
||||
<text>{{shop.name}}</text>
|
||||
</view>
|
||||
<view class="base-bottom oh margin-top-sm">
|
||||
|
|
|
|||
|
|
@ -1,24 +1,33 @@
|
|||
## 1.3.3（2022-03-31）
|
||||
- 修复 按钮字体大小不能设置的bug
|
||||
## 1.3.2（2022-03-16）
|
||||
- 修复 h5和app端下报el错误的bug
|
||||
## 1.3.1（2022-03-07）
|
||||
- 修复 HBuilderX 1.4.X 版本中，h5和app端下报错的bug
|
||||
## 1.3.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swipe-action](https://uniapp.dcloud.io/component/uniui/uni-swipe-action)
|
||||
## 1.2.4（2021-08-20）
|
||||
- 优化 close-all 方法
|
||||
## 1.2.3（2021-08-20）
|
||||
- 新增 close-all 方法，关闭所有已打开的组件
|
||||
## 1.2.2（2021-08-17）
|
||||
- 新增 resize() 方法，在非微信小程序、h5、app-vue端出现不能滑动的问题的时候，重置组件
|
||||
- 修复 app 端偶尔出现类似 Page[x][-x,xx;-x,xx,x,x-x] 的问题
|
||||
- 优化 微信小程序、h5、app-vue 滑动逻辑，避免出现动态新增组件后不能滑动的问题
|
||||
## 1.2.1（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
- 修复 跨页面修改组件数据 ，导致不能滑动的问题
|
||||
## 1.1.10（2021-06-17）
|
||||
- 修复 按钮点击执行两次的bug
|
||||
## 1.1.9（2021-05-12）
|
||||
- 新增 项目示例地址
|
||||
## 1.1.8（2021-03-26）
|
||||
- 修复 微信小程序 nv_navigator is not defined 报错的bug
|
||||
## 1.1.7（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 新增 左侧滑动
|
||||
- 新增 插槽使用方式
|
||||
- 新增 threshold 属性，可以控制滑动缺省值
|
||||
- 优化 长列表滚动性能
|
||||
- 修复 滚动页面时触发组件滑动的Bug
|
||||
## 1.2.2（2021-08-17）
|
||||
- 新增 resize() 方法，在非微信小程序、h5、app-vue端出现不能滑动的问题的时候，重置组件
|
||||
- 修复 app 端偶尔出现类似 Page[x][-x,xx;-x,xx,x,x-x] 的问题
|
||||
- 优化 微信小程序、h5、app-vue 滑动逻辑，避免出现动态新增组件后不能滑动的问题
|
||||
## 1.2.1（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
- 修复 跨页面修改组件数据 ，导致不能滑动的问题
|
||||
## 1.1.10（2021-06-17）
|
||||
- 修复 按钮点击执行两次的bug
|
||||
## 1.1.9（2021-05-12）
|
||||
- 新增 项目示例地址
|
||||
## 1.1.8（2021-03-26）
|
||||
- 修复 微信小程序 nv_navigator is not defined 报错的bug
|
||||
## 1.1.7（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 新增 左侧滑动
|
||||
- 新增 插槽使用方式
|
||||
- 新增 threshold 属性，可以控制滑动缺省值
|
||||
- 优化 长列表滚动性能
|
||||
- 修复 滚动页面时触发组件滑动的Bug
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
let bindIngXMixins = {}
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
const BindingX = uni.requireNativePlugin('bindingx');
|
||||
const dom = uni.requireNativePlugin('dom');
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
|
||||
export default {
|
||||
bindIngXMixins = {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
|
@ -11,7 +13,7 @@ export default {
|
|||
watch: {
|
||||
show(newVal) {
|
||||
if (this.autoClose) return
|
||||
if (this.stop) return
|
||||
if (this.stop) return
|
||||
this.stop = true
|
||||
if (newVal) {
|
||||
this.open(newVal)
|
||||
|
|
@ -70,10 +72,10 @@ export default {
|
|||
// 每次只触发一次，避免多次监听造成闪烁
|
||||
if (this.stop) return
|
||||
this.stop = true
|
||||
if (this.autoClose) {
|
||||
this.swipeaction.closeOther(this)
|
||||
}
|
||||
|
||||
if (this.autoClose) {
|
||||
this.swipeaction.closeOther(this)
|
||||
}
|
||||
|
||||
const leftWidth = this.button.left.width
|
||||
const rightWidth = this.button.right.width
|
||||
let expression = this.range(this.x, -rightWidth, leftWidth)
|
||||
|
|
@ -291,10 +293,8 @@ export default {
|
|||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
export default {}
|
||||
// #endif
|
||||
export default bindIngXMixins
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
let otherMixins = {}
|
||||
|
||||
// #ifndef APP-PLUS|| MP-WEIXIN || H5
|
||||
|
||||
const MIN_DISTANCE = 10;
|
||||
export default {
|
||||
otherMixins = {
|
||||
data() {
|
||||
// TODO 随机生生元素ID，解决百度小程序获取同一个元素位置信息的bug
|
||||
const elClass = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
|
|
@ -50,7 +51,7 @@ export default {
|
|||
this.left = 0
|
||||
this.x = 0
|
||||
},
|
||||
|
||||
|
||||
closeSwipe(e) {
|
||||
if (!this.autoClose) return
|
||||
this.swipeaction.closeOther(this)
|
||||
|
|
@ -253,6 +254,4 @@ export default {
|
|||
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS|| MP-WEIXIN || H5
|
||||
export default { }
|
||||
// #endif
|
||||
export default otherMixins
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
let mpMixins = {}
|
||||
// #ifdef APP-VUE|| MP-WEIXIN || H5
|
||||
import { isPC } from "./isPC"
|
||||
export default {
|
||||
import {
|
||||
isPC
|
||||
} from "./isPC"
|
||||
mpMixins = {
|
||||
data() {
|
||||
return {
|
||||
is_show:'none'
|
||||
is_show: 'none'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newVal){
|
||||
show(newVal) {
|
||||
this.is_show = this.show
|
||||
}
|
||||
},
|
||||
|
|
@ -17,7 +20,7 @@ export default {
|
|||
this.swipeaction.children.push(this)
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
this.is_show = this.show
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -34,9 +37,9 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
appTouchStart(e) {
|
||||
// #ifdef H5
|
||||
if(isPC()) return
|
||||
appTouchStart(e) {
|
||||
// #ifdef H5
|
||||
if (isPC()) return
|
||||
// #endif
|
||||
const {
|
||||
clientX
|
||||
|
|
@ -44,9 +47,9 @@ export default {
|
|||
this.clientX = clientX
|
||||
this.timestamp = new Date().getTime()
|
||||
},
|
||||
appTouchEnd(e, index, item, position) {
|
||||
// #ifdef H5
|
||||
if(isPC()) return
|
||||
appTouchEnd(e, index, item, position) {
|
||||
// #ifdef H5
|
||||
if (isPC()) return
|
||||
// #endif
|
||||
const {
|
||||
clientX
|
||||
|
|
@ -60,22 +63,20 @@ export default {
|
|||
index,
|
||||
position
|
||||
})
|
||||
}
|
||||
},
|
||||
onClickForPC(index, item, position) {
|
||||
// #ifdef H5
|
||||
if(!isPC()) return
|
||||
}
|
||||
},
|
||||
onClickForPC(index, item, position) {
|
||||
// #ifdef H5
|
||||
if (!isPC()) return
|
||||
this.$emit('click', {
|
||||
content: item,
|
||||
index,
|
||||
position
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #endif
|
||||
// #ifndef APP-VUE|| MP-WEIXIN || H5
|
||||
export default {}
|
||||
// #endif
|
||||
// #endif
|
||||
export default mpMixins
|
||||
|
|
|
|||
|
|
@ -1,265 +1,270 @@
|
|||
const MIN_DISTANCE = 10;
|
||||
export default {
|
||||
showWatch(newVal, oldVal, ownerInstance, instance,self) {
|
||||
let state = self.state
|
||||
this.getDom(instance, ownerInstance,self)
|
||||
if (newVal && newVal !== 'none') {
|
||||
this.openState(newVal, instance, ownerInstance,self)
|
||||
return
|
||||
}
|
||||
|
||||
if (state.left) {
|
||||
this.openState('none', instance, ownerInstance,self)
|
||||
}
|
||||
this.resetTouchStatus(instance,self)
|
||||
},
|
||||
|
||||
/**
|
||||
* 开始触摸操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ins
|
||||
*/
|
||||
touchstart(e, ownerInstance, self) {
|
||||
let instance = e.instance;
|
||||
let disabled = instance.getDataset().disabled
|
||||
let state = self.state;
|
||||
this.getDom(instance, ownerInstance, self)
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = this.getDisabledType(disabled)
|
||||
if (disabled) return
|
||||
// 开始触摸时移除动画类
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.removeClass('ani');
|
||||
ownerInstance.callMethod('closeSwipe');
|
||||
})
|
||||
|
||||
// 记录上次的位置
|
||||
state.x = state.left || 0
|
||||
// 计算滑动开始位置
|
||||
this.stopTouchStart(e, ownerInstance, self)
|
||||
},
|
||||
|
||||
/**
|
||||
* 开始滑动操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
touchmove(e, ownerInstance, self) {
|
||||
let instance = e.instance;
|
||||
let disabled = instance.getDataset().disabled
|
||||
let state = self.state
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = this.getDisabledType(disabled)
|
||||
if (disabled) return
|
||||
// 是否可以滑动页面
|
||||
this.stopTouchMove(e, self);
|
||||
if (state.direction !== 'horizontal') {
|
||||
return;
|
||||
}
|
||||
if (e.preventDefault) {
|
||||
// 阻止页面滚动
|
||||
e.preventDefault()
|
||||
}
|
||||
let x = state.x + state.deltaX
|
||||
this.move(x, instance, ownerInstance, self)
|
||||
},
|
||||
|
||||
/**
|
||||
* 结束触摸操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
touchend(e, ownerInstance, self) {
|
||||
let instance = e.instance;
|
||||
let disabled = instance.getDataset().disabled
|
||||
let state = self.state
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = this.getDisabledType(disabled)
|
||||
|
||||
if (disabled) return
|
||||
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
|
||||
// fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题 ，主要是 ios13
|
||||
this.moveDirection(state.left, instance, ownerInstance, self)
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置移动距离
|
||||
* @param {Object} value
|
||||
* @param {Object} instance
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
move(value, instance, ownerInstance, self) {
|
||||
value = value || 0
|
||||
let state = self.state
|
||||
let leftWidth = state.leftWidth
|
||||
let rightWidth = state.rightWidth
|
||||
// 获取可滑动范围
|
||||
state.left = this.range(value, -rightWidth, leftWidth);
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.setStyle({
|
||||
transform: 'translateX(' + state.left + 'px)',
|
||||
'-webkit-transform': 'translateX(' + state.left + 'px)'
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取元素信息
|
||||
* @param {Object} instance
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
getDom(instance, ownerInstance, self) {
|
||||
let state = self.state
|
||||
var leftDom = ownerInstance.$el.querySelector('.button-group--left')
|
||||
var rightDom = ownerInstance.$el.querySelector('.button-group--right')
|
||||
|
||||
state.leftWidth = leftDom.offsetWidth || 0
|
||||
state.rightWidth = rightDom.offsetWidth || 0
|
||||
state.threshold = instance.getDataset().threshold
|
||||
},
|
||||
|
||||
getDisabledType(value) {
|
||||
return (typeof(value) === 'string' ? JSON.parse(value) : value) || false;
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取范围
|
||||
* @param {Object} num
|
||||
* @param {Object} min
|
||||
* @param {Object} max
|
||||
*/
|
||||
range(num, min, max) {
|
||||
return Math.min(Math.max(num, min), max);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 移动方向判断
|
||||
* @param {Object} left
|
||||
* @param {Object} value
|
||||
* @param {Object} ownerInstance
|
||||
* @param {Object} ins
|
||||
*/
|
||||
moveDirection(left, ins, ownerInstance, self) {
|
||||
var state = self.state
|
||||
var threshold = state.threshold
|
||||
var position = state.position
|
||||
var isopen = state.isopen || 'none'
|
||||
var leftWidth = state.leftWidth
|
||||
var rightWidth = state.rightWidth
|
||||
if (state.deltaX === 0) {
|
||||
this.openState('none', ins, ownerInstance, self)
|
||||
return
|
||||
}
|
||||
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 &&
|
||||
rightWidth +
|
||||
left < threshold)) {
|
||||
// right
|
||||
this.openState('right', ins, ownerInstance, self)
|
||||
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
|
||||
leftWidth - left < threshold)) {
|
||||
// left
|
||||
this.openState('left', ins, ownerInstance, self)
|
||||
} else {
|
||||
// default
|
||||
this.openState('none', ins, ownerInstance, self)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 开启状态
|
||||
* @param {Boolean} type
|
||||
* @param {Object} ins
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
openState(type, ins, ownerInstance, self) {
|
||||
let state = self.state
|
||||
let leftWidth = state.leftWidth
|
||||
let rightWidth = state.rightWidth
|
||||
let left = ''
|
||||
state.isopen = state.isopen ? state.isopen : 'none'
|
||||
switch (type) {
|
||||
case "left":
|
||||
left = leftWidth
|
||||
break
|
||||
case "right":
|
||||
left = -rightWidth
|
||||
break
|
||||
default:
|
||||
left = 0
|
||||
}
|
||||
|
||||
// && !state.throttle
|
||||
|
||||
if (state.isopen !== type) {
|
||||
state.throttle = true
|
||||
ownerInstance.callMethod('change', {
|
||||
open: type
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
state.isopen = type
|
||||
// 添加动画类
|
||||
ins.requestAnimationFrame(()=> {
|
||||
ins.addClass('ani');
|
||||
this.move(left, ins, ownerInstance, self)
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
getDirection(x, y) {
|
||||
if (x > y && x > MIN_DISTANCE) {
|
||||
return 'horizontal';
|
||||
}
|
||||
if (y > x && y > MIN_DISTANCE) {
|
||||
return 'vertical';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置滑动状态
|
||||
* @param {Object} event
|
||||
*/
|
||||
resetTouchStatus(instance, self) {
|
||||
let state = self.state;
|
||||
state.direction = '';
|
||||
state.deltaX = 0;
|
||||
state.deltaY = 0;
|
||||
state.offsetX = 0;
|
||||
state.offsetY = 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置滑动开始位置
|
||||
* @param {Object} event
|
||||
*/
|
||||
stopTouchStart(event, ownerInstance, self) {
|
||||
let instance = event.instance;
|
||||
let state = self.state
|
||||
this.resetTouchStatus(instance, self);
|
||||
var touch = event.touches[0];
|
||||
state.startX = touch.clientX;
|
||||
state.startY = touch.clientY;
|
||||
},
|
||||
|
||||
/**
|
||||
* 滑动中，是否禁止打开
|
||||
* @param {Object} event
|
||||
*/
|
||||
stopTouchMove(event, self) {
|
||||
let instance = event.instance;
|
||||
let state = self.state;
|
||||
let touch = event.touches[0];
|
||||
|
||||
state.deltaX = touch.clientX - state.startX;
|
||||
state.deltaY = touch.clientY - state.startY;
|
||||
state.offsetY = Math.abs(state.deltaY);
|
||||
state.offsetX = Math.abs(state.deltaX);
|
||||
state.direction = state.direction || this.getDirection(state.offsetX, state.offsetY);
|
||||
}
|
||||
}
|
||||
const MIN_DISTANCE = 10;
|
||||
export default {
|
||||
showWatch(newVal, oldVal, ownerInstance, instance,self) {
|
||||
var state = self.state
|
||||
var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
|
||||
if(!$el) return
|
||||
this.getDom(instance, ownerInstance,self)
|
||||
if (newVal && newVal !== 'none') {
|
||||
this.openState(newVal, instance, ownerInstance,self)
|
||||
return
|
||||
}
|
||||
|
||||
if (state.left) {
|
||||
this.openState('none', instance, ownerInstance,self)
|
||||
}
|
||||
this.resetTouchStatus(instance,self)
|
||||
},
|
||||
|
||||
/**
|
||||
* 开始触摸操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ins
|
||||
*/
|
||||
touchstart(e, ownerInstance, self) {
|
||||
let instance = e.instance;
|
||||
let disabled = instance.getDataset().disabled
|
||||
let state = self.state;
|
||||
this.getDom(instance, ownerInstance, self)
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = this.getDisabledType(disabled)
|
||||
if (disabled) return
|
||||
// 开始触摸时移除动画类
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.removeClass('ani');
|
||||
ownerInstance.callMethod('closeSwipe');
|
||||
})
|
||||
|
||||
// 记录上次的位置
|
||||
state.x = state.left || 0
|
||||
// 计算滑动开始位置
|
||||
this.stopTouchStart(e, ownerInstance, self)
|
||||
},
|
||||
|
||||
/**
|
||||
* 开始滑动操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
touchmove(e, ownerInstance, self) {
|
||||
let instance = e.instance;
|
||||
// 删除之后已经那不到实例了
|
||||
if(!instance) return;
|
||||
let disabled = instance.getDataset().disabled
|
||||
let state = self.state
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = this.getDisabledType(disabled)
|
||||
if (disabled) return
|
||||
// 是否可以滑动页面
|
||||
this.stopTouchMove(e, self);
|
||||
if (state.direction !== 'horizontal') {
|
||||
return;
|
||||
}
|
||||
if (e.preventDefault) {
|
||||
// 阻止页面滚动
|
||||
e.preventDefault()
|
||||
}
|
||||
let x = state.x + state.deltaX
|
||||
this.move(x, instance, ownerInstance, self)
|
||||
},
|
||||
|
||||
/**
|
||||
* 结束触摸操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
touchend(e, ownerInstance, self) {
|
||||
let instance = e.instance;
|
||||
let disabled = instance.getDataset().disabled
|
||||
let state = self.state
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = this.getDisabledType(disabled)
|
||||
|
||||
if (disabled) return
|
||||
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
|
||||
// fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题 ，主要是 ios13
|
||||
this.moveDirection(state.left, instance, ownerInstance, self)
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置移动距离
|
||||
* @param {Object} value
|
||||
* @param {Object} instance
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
move(value, instance, ownerInstance, self) {
|
||||
value = value || 0
|
||||
let state = self.state
|
||||
let leftWidth = state.leftWidth
|
||||
let rightWidth = state.rightWidth
|
||||
// 获取可滑动范围
|
||||
state.left = this.range(value, -rightWidth, leftWidth);
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.setStyle({
|
||||
transform: 'translateX(' + state.left + 'px)',
|
||||
'-webkit-transform': 'translateX(' + state.left + 'px)'
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取元素信息
|
||||
* @param {Object} instance
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
getDom(instance, ownerInstance, self) {
|
||||
var state = self.state
|
||||
var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
|
||||
var leftDom = $el.querySelector('.button-group--left')
|
||||
var rightDom = $el.querySelector('.button-group--right')
|
||||
|
||||
state.leftWidth = leftDom.offsetWidth || 0
|
||||
state.rightWidth = rightDom.offsetWidth || 0
|
||||
state.threshold = instance.getDataset().threshold
|
||||
},
|
||||
|
||||
getDisabledType(value) {
|
||||
return (typeof(value) === 'string' ? JSON.parse(value) : value) || false;
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取范围
|
||||
* @param {Object} num
|
||||
* @param {Object} min
|
||||
* @param {Object} max
|
||||
*/
|
||||
range(num, min, max) {
|
||||
return Math.min(Math.max(num, min), max);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 移动方向判断
|
||||
* @param {Object} left
|
||||
* @param {Object} value
|
||||
* @param {Object} ownerInstance
|
||||
* @param {Object} ins
|
||||
*/
|
||||
moveDirection(left, ins, ownerInstance, self) {
|
||||
var state = self.state
|
||||
var threshold = state.threshold
|
||||
var position = state.position
|
||||
var isopen = state.isopen || 'none'
|
||||
var leftWidth = state.leftWidth
|
||||
var rightWidth = state.rightWidth
|
||||
if (state.deltaX === 0) {
|
||||
this.openState('none', ins, ownerInstance, self)
|
||||
return
|
||||
}
|
||||
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 &&
|
||||
rightWidth +
|
||||
left < threshold)) {
|
||||
// right
|
||||
this.openState('right', ins, ownerInstance, self)
|
||||
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
|
||||
leftWidth - left < threshold)) {
|
||||
// left
|
||||
this.openState('left', ins, ownerInstance, self)
|
||||
} else {
|
||||
// default
|
||||
this.openState('none', ins, ownerInstance, self)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 开启状态
|
||||
* @param {Boolean} type
|
||||
* @param {Object} ins
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
openState(type, ins, ownerInstance, self) {
|
||||
let state = self.state
|
||||
let leftWidth = state.leftWidth
|
||||
let rightWidth = state.rightWidth
|
||||
let left = ''
|
||||
state.isopen = state.isopen ? state.isopen : 'none'
|
||||
switch (type) {
|
||||
case "left":
|
||||
left = leftWidth
|
||||
break
|
||||
case "right":
|
||||
left = -rightWidth
|
||||
break
|
||||
default:
|
||||
left = 0
|
||||
}
|
||||
|
||||
// && !state.throttle
|
||||
|
||||
if (state.isopen !== type) {
|
||||
state.throttle = true
|
||||
ownerInstance.callMethod('change', {
|
||||
open: type
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
state.isopen = type
|
||||
// 添加动画类
|
||||
ins.requestAnimationFrame(()=> {
|
||||
ins.addClass('ani');
|
||||
this.move(left, ins, ownerInstance, self)
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
getDirection(x, y) {
|
||||
if (x > y && x > MIN_DISTANCE) {
|
||||
return 'horizontal';
|
||||
}
|
||||
if (y > x && y > MIN_DISTANCE) {
|
||||
return 'vertical';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置滑动状态
|
||||
* @param {Object} event
|
||||
*/
|
||||
resetTouchStatus(instance, self) {
|
||||
let state = self.state;
|
||||
state.direction = '';
|
||||
state.deltaX = 0;
|
||||
state.deltaY = 0;
|
||||
state.offsetX = 0;
|
||||
state.offsetY = 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置滑动开始位置
|
||||
* @param {Object} event
|
||||
*/
|
||||
stopTouchStart(event, ownerInstance, self) {
|
||||
let instance = event.instance;
|
||||
let state = self.state
|
||||
this.resetTouchStatus(instance, self);
|
||||
var touch = event.touches[0];
|
||||
state.startX = touch.clientX;
|
||||
state.startY = touch.clientY;
|
||||
},
|
||||
|
||||
/**
|
||||
* 滑动中，是否禁止打开
|
||||
* @param {Object} event
|
||||
*/
|
||||
stopTouchMove(event, self) {
|
||||
let instance = event.instance;
|
||||
let state = self.state;
|
||||
let touch = event.touches[0];
|
||||
|
||||
state.deltaX = touch.clientX - state.startX;
|
||||
state.deltaY = touch.clientY - state.startY;
|
||||
state.offsetY = Math.abs(state.deltaY);
|
||||
state.offsetX = Math.abs(state.deltaX);
|
||||
state.direction = state.direction || this.getDirection(state.offsetX, state.offsetY);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,12 +14,11 @@
|
|||
<view class="uni-swipe_button-group button-group--left">
|
||||
<slot name="left">
|
||||
<view v-for="(item,index) in leftOptions" :key="index" :style="{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
|
||||
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
|
||||
}" class="uni-swipe_button button-hock" @touchstart="appTouchStart"
|
||||
@touchend="appTouchEnd($event,index,item,'left')" @click.stop="onClickForPC(index,item,'left')">
|
||||
<text class="uni-swipe_button-text"
|
||||
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
|
||||
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
|
|
@ -29,12 +28,11 @@
|
|||
<view class="uni-swipe_button-group button-group--right">
|
||||
<slot name="right">
|
||||
<view v-for="(item,index) in rightOptions" :key="index" :style="{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
|
||||
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
|
||||
}" class="uni-swipe_button button-hock" @touchstart="appTouchStart"
|
||||
@touchend="appTouchEnd($event,index,item,'right')"
|
||||
@click.stop="onClickForPC(index,item,'right')"><text class="uni-swipe_button-text"
|
||||
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
|
||||
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
|
|
@ -47,22 +45,20 @@
|
|||
<view ref='selector-left-button--hock' class="uni-swipe_button-group button-group--left">
|
||||
<slot name="left">
|
||||
<view v-for="(item,index) in leftOptions" :data-button="btn" :key="index" :style="{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
|
||||
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
|
||||
}" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'left')"><text
|
||||
class="uni-swipe_button-text"
|
||||
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
|
||||
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF', fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view ref='selector-right-button--hock' class="uni-swipe_button-group button-group--right">
|
||||
<slot name="right">
|
||||
<view v-for="(item,index) in rightOptions" :data-button="btn" :key="index" :style="{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
|
||||
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
|
||||
}" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'right')"><text
|
||||
class="uni-swipe_button-text"
|
||||
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
|
||||
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
|
|
@ -73,7 +69,7 @@
|
|||
<!-- #endif -->
|
||||
<!-- 其他平台使用 js ，长列表性能可能会有影响-->
|
||||
<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ -->
|
||||
<view class="uni-swipe">
|
||||
<view class="uni-swipe">
|
||||
<view class="uni-swipe_box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
|
||||
:style="{transform:moveLeft}" :class="{ani:ani}">
|
||||
<view class="uni-swipe_button-group button-group--left" :class="[elClass]">
|
||||
|
|
@ -102,7 +98,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
|
||||
</template>
|
||||
<script src="./wx.wxs" module="wxsswipe" lang="wxs"></script>
|
||||
|
||||
|
|
@ -206,7 +202,7 @@
|
|||
this.uninstall()
|
||||
},
|
||||
// #endif
|
||||
|
||||
|
||||
methods: {
|
||||
uninstall() {
|
||||
if (this.swipeaction) {
|
||||
|
|
@ -233,7 +229,7 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
.uni-swipe {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
|
|
|
|||
|
|
@ -1,341 +1,341 @@
|
|||
var MIN_DISTANCE = 10;
|
||||
|
||||
/**
|
||||
* 判断当前是否为H5、app-vue
|
||||
*/
|
||||
var IS_HTML5 = false
|
||||
if (typeof window === 'object') IS_HTML5 = true
|
||||
|
||||
/**
|
||||
* 监听页面内值的变化,主要用于动态开关swipe-action
|
||||
* @param {Object} newValue
|
||||
* @param {Object} oldValue
|
||||
* @param {Object} ownerInstance
|
||||
* @param {Object} instance
|
||||
*/
|
||||
function showWatch(newVal, oldVal, ownerInstance, instance) {
|
||||
var state = instance.getState()
|
||||
getDom(instance, ownerInstance)
|
||||
if (newVal && newVal !== 'none') {
|
||||
openState(newVal, instance, ownerInstance)
|
||||
return
|
||||
}
|
||||
|
||||
if (state.left) {
|
||||
openState('none', instance, ownerInstance)
|
||||
}
|
||||
resetTouchStatus(instance)
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始触摸操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ins
|
||||
*/
|
||||
function touchstart(e, ownerInstance) {
|
||||
var instance = e.instance;
|
||||
var disabled = instance.getDataset().disabled
|
||||
var state = instance.getState();
|
||||
getDom(instance, ownerInstance)
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||
if (disabled) return
|
||||
// 开始触摸时移除动画类
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.removeClass('ani');
|
||||
ownerInstance.callMethod('closeSwipe');
|
||||
})
|
||||
|
||||
// 记录上次的位置
|
||||
state.x = state.left || 0
|
||||
// 计算滑动开始位置
|
||||
stopTouchStart(e, ownerInstance)
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始滑动操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function touchmove(e, ownerInstance) {
|
||||
var instance = e.instance;
|
||||
var disabled = instance.getDataset().disabled
|
||||
var state = instance.getState()
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||
if (disabled) return
|
||||
// 是否可以滑动页面
|
||||
stopTouchMove(e);
|
||||
if (state.direction !== 'horizontal') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.preventDefault) {
|
||||
// 阻止页面滚动
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
move(state.x + state.deltaX, instance, ownerInstance)
|
||||
}
|
||||
|
||||
/**
|
||||
* 结束触摸操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function touchend(e, ownerInstance) {
|
||||
var instance = e.instance;
|
||||
var disabled = instance.getDataset().disabled
|
||||
var state = instance.getState()
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||
|
||||
if (disabled) return
|
||||
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
|
||||
// fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题 ，主要是 ios13
|
||||
moveDirection(state.left, instance, ownerInstance)
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置移动距离
|
||||
* @param {Object} value
|
||||
* @param {Object} instance
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function move(value, instance, ownerInstance) {
|
||||
value = value || 0
|
||||
var state = instance.getState()
|
||||
var leftWidth = state.leftWidth
|
||||
var rightWidth = state.rightWidth
|
||||
// 获取可滑动范围
|
||||
state.left = range(value, -rightWidth, leftWidth);
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.setStyle({
|
||||
transform: 'translateX(' + state.left + 'px)',
|
||||
'-webkit-transform': 'translateX(' + state.left + 'px)'
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取元素信息
|
||||
* @param {Object} instance
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function getDom(instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
var leftDom = ownerInstance.selectComponent('.button-group--left')
|
||||
var rightDom = ownerInstance.selectComponent('.button-group--right')
|
||||
var leftStyles = {
|
||||
width: 0
|
||||
}
|
||||
var rightStyles = {
|
||||
width: 0
|
||||
}
|
||||
leftStyles = leftDom.getBoundingClientRect()
|
||||
rightStyles = rightDom.getBoundingClientRect()
|
||||
|
||||
state.leftWidth = leftStyles.width || 0
|
||||
state.rightWidth = rightStyles.width || 0
|
||||
state.threshold = instance.getDataset().threshold
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取范围
|
||||
* @param {Object} num
|
||||
* @param {Object} min
|
||||
* @param {Object} max
|
||||
*/
|
||||
function range(num, min, max) {
|
||||
return Math.min(Math.max(num, min), max);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 移动方向判断
|
||||
* @param {Object} left
|
||||
* @param {Object} value
|
||||
* @param {Object} ownerInstance
|
||||
* @param {Object} ins
|
||||
*/
|
||||
function moveDirection(left, ins, ownerInstance) {
|
||||
var state = ins.getState()
|
||||
var threshold = state.threshold
|
||||
var position = state.position
|
||||
var isopen = state.isopen || 'none'
|
||||
var leftWidth = state.leftWidth
|
||||
var rightWidth = state.rightWidth
|
||||
if (state.deltaX === 0) {
|
||||
openState('none', ins, ownerInstance)
|
||||
return
|
||||
}
|
||||
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 &&
|
||||
rightWidth +
|
||||
left < threshold)) {
|
||||
// right
|
||||
openState('right', ins, ownerInstance)
|
||||
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
|
||||
leftWidth - left < threshold)) {
|
||||
// left
|
||||
openState('left', ins, ownerInstance)
|
||||
} else {
|
||||
// default
|
||||
openState('none', ins, ownerInstance)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 开启状态
|
||||
* @param {Boolean} type
|
||||
* @param {Object} ins
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function openState(type, ins, ownerInstance) {
|
||||
var state = ins.getState()
|
||||
var leftWidth = state.leftWidth
|
||||
var rightWidth = state.rightWidth
|
||||
var left = ''
|
||||
state.isopen = state.isopen ? state.isopen : 'none'
|
||||
switch (type) {
|
||||
case "left":
|
||||
left = leftWidth
|
||||
break
|
||||
case "right":
|
||||
left = -rightWidth
|
||||
break
|
||||
default:
|
||||
left = 0
|
||||
}
|
||||
|
||||
// && !state.throttle
|
||||
|
||||
if (state.isopen !== type) {
|
||||
state.throttle = true
|
||||
ownerInstance.callMethod('change', {
|
||||
open: type
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
state.isopen = type
|
||||
// 添加动画类
|
||||
ins.requestAnimationFrame(function() {
|
||||
ins.addClass('ani');
|
||||
move(left, ins, ownerInstance)
|
||||
})
|
||||
// 设置最终移动位置,理论上只要进入到这个函数，肯定是要打开的
|
||||
}
|
||||
|
||||
|
||||
function getDirection(x, y) {
|
||||
if (x > y && x > MIN_DISTANCE) {
|
||||
return 'horizontal';
|
||||
}
|
||||
if (y > x && y > MIN_DISTANCE) {
|
||||
return 'vertical';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置滑动状态
|
||||
* @param {Object} event
|
||||
*/
|
||||
function resetTouchStatus(instance) {
|
||||
var state = instance.getState();
|
||||
state.direction = '';
|
||||
state.deltaX = 0;
|
||||
state.deltaY = 0;
|
||||
state.offsetX = 0;
|
||||
state.offsetY = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置滑动开始位置
|
||||
* @param {Object} event
|
||||
*/
|
||||
function stopTouchStart(event) {
|
||||
var instance = event.instance;
|
||||
var state = instance.getState();
|
||||
resetTouchStatus(instance);
|
||||
var touch = event.touches[0];
|
||||
if (IS_HTML5 && isPC()) {
|
||||
touch = event;
|
||||
}
|
||||
state.startX = touch.clientX;
|
||||
state.startY = touch.clientY;
|
||||
}
|
||||
|
||||
/**
|
||||
* 滑动中，是否禁止打开
|
||||
* @param {Object} event
|
||||
*/
|
||||
function stopTouchMove(event) {
|
||||
var instance = event.instance;
|
||||
var state = instance.getState();
|
||||
var touch = event.touches[0];
|
||||
if (IS_HTML5 && isPC()) {
|
||||
touch = event;
|
||||
}
|
||||
state.deltaX = touch.clientX - state.startX;
|
||||
state.deltaY = touch.clientY - state.startY;
|
||||
state.offsetY = Math.abs(state.deltaY);
|
||||
state.offsetX = Math.abs(state.deltaX);
|
||||
state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
|
||||
}
|
||||
|
||||
function isPC() {
|
||||
var userAgentInfo = navigator.userAgent;
|
||||
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||
var flag = true;
|
||||
for (var v = 0; v < Agents.length - 1; v++) {
|
||||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||
flag = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
|
||||
var movable = false
|
||||
|
||||
function mousedown(e, ins) {
|
||||
if (!IS_HTML5) return
|
||||
if (!isPC()) return
|
||||
touchstart(e, ins)
|
||||
movable = true
|
||||
}
|
||||
|
||||
function mousemove(e, ins) {
|
||||
if (!IS_HTML5) return
|
||||
if (!isPC()) return
|
||||
if (!movable) return
|
||||
touchmove(e, ins)
|
||||
}
|
||||
|
||||
function mouseup(e, ins) {
|
||||
if (!IS_HTML5) return
|
||||
if (!isPC()) return
|
||||
touchend(e, ins)
|
||||
movable = false
|
||||
}
|
||||
|
||||
function mouseleave(e, ins) {
|
||||
if (!IS_HTML5) return
|
||||
if (!isPC()) return
|
||||
movable = false
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
showWatch: showWatch,
|
||||
touchstart: touchstart,
|
||||
touchmove: touchmove,
|
||||
touchend: touchend,
|
||||
mousedown: mousedown,
|
||||
mousemove: mousemove,
|
||||
mouseup: mouseup,
|
||||
mouseleave: mouseleave
|
||||
}
|
||||
var MIN_DISTANCE = 10;
|
||||
|
||||
/**
|
||||
* 判断当前是否为H5、app-vue
|
||||
*/
|
||||
var IS_HTML5 = false
|
||||
if (typeof window === 'object') IS_HTML5 = true
|
||||
|
||||
/**
|
||||
* 监听页面内值的变化,主要用于动态开关swipe-action
|
||||
* @param {Object} newValue
|
||||
* @param {Object} oldValue
|
||||
* @param {Object} ownerInstance
|
||||
* @param {Object} instance
|
||||
*/
|
||||
function showWatch(newVal, oldVal, ownerInstance, instance) {
|
||||
var state = instance.getState()
|
||||
getDom(instance, ownerInstance)
|
||||
if (newVal && newVal !== 'none') {
|
||||
openState(newVal, instance, ownerInstance)
|
||||
return
|
||||
}
|
||||
|
||||
if (state.left) {
|
||||
openState('none', instance, ownerInstance)
|
||||
}
|
||||
resetTouchStatus(instance)
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始触摸操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ins
|
||||
*/
|
||||
function touchstart(e, ownerInstance) {
|
||||
var instance = e.instance;
|
||||
var disabled = instance.getDataset().disabled
|
||||
var state = instance.getState();
|
||||
getDom(instance, ownerInstance)
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||
if (disabled) return
|
||||
// 开始触摸时移除动画类
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.removeClass('ani');
|
||||
ownerInstance.callMethod('closeSwipe');
|
||||
})
|
||||
|
||||
// 记录上次的位置
|
||||
state.x = state.left || 0
|
||||
// 计算滑动开始位置
|
||||
stopTouchStart(e, ownerInstance)
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始滑动操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function touchmove(e, ownerInstance) {
|
||||
var instance = e.instance;
|
||||
var disabled = instance.getDataset().disabled
|
||||
var state = instance.getState()
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||
if (disabled) return
|
||||
// 是否可以滑动页面
|
||||
stopTouchMove(e);
|
||||
if (state.direction !== 'horizontal') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.preventDefault) {
|
||||
// 阻止页面滚动
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
move(state.x + state.deltaX, instance, ownerInstance)
|
||||
}
|
||||
|
||||
/**
|
||||
* 结束触摸操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function touchend(e, ownerInstance) {
|
||||
var instance = e.instance;
|
||||
var disabled = instance.getDataset().disabled
|
||||
var state = instance.getState()
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||
|
||||
if (disabled) return
|
||||
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
|
||||
// fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题 ，主要是 ios13
|
||||
moveDirection(state.left, instance, ownerInstance)
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置移动距离
|
||||
* @param {Object} value
|
||||
* @param {Object} instance
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function move(value, instance, ownerInstance) {
|
||||
value = value || 0
|
||||
var state = instance.getState()
|
||||
var leftWidth = state.leftWidth
|
||||
var rightWidth = state.rightWidth
|
||||
// 获取可滑动范围
|
||||
state.left = range(value, -rightWidth, leftWidth);
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.setStyle({
|
||||
transform: 'translateX(' + state.left + 'px)',
|
||||
'-webkit-transform': 'translateX(' + state.left + 'px)'
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取元素信息
|
||||
* @param {Object} instance
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function getDom(instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
var leftDom = ownerInstance.selectComponent('.button-group--left')
|
||||
var rightDom = ownerInstance.selectComponent('.button-group--right')
|
||||
var leftStyles = {
|
||||
width: 0
|
||||
}
|
||||
var rightStyles = {
|
||||
width: 0
|
||||
}
|
||||
leftStyles = leftDom.getBoundingClientRect()
|
||||
rightStyles = rightDom.getBoundingClientRect()
|
||||
|
||||
state.leftWidth = leftStyles.width || 0
|
||||
state.rightWidth = rightStyles.width || 0
|
||||
state.threshold = instance.getDataset().threshold
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取范围
|
||||
* @param {Object} num
|
||||
* @param {Object} min
|
||||
* @param {Object} max
|
||||
*/
|
||||
function range(num, min, max) {
|
||||
return Math.min(Math.max(num, min), max);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 移动方向判断
|
||||
* @param {Object} left
|
||||
* @param {Object} value
|
||||
* @param {Object} ownerInstance
|
||||
* @param {Object} ins
|
||||
*/
|
||||
function moveDirection(left, ins, ownerInstance) {
|
||||
var state = ins.getState()
|
||||
var threshold = state.threshold
|
||||
var position = state.position
|
||||
var isopen = state.isopen || 'none'
|
||||
var leftWidth = state.leftWidth
|
||||
var rightWidth = state.rightWidth
|
||||
if (state.deltaX === 0) {
|
||||
openState('none', ins, ownerInstance)
|
||||
return
|
||||
}
|
||||
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 &&
|
||||
rightWidth +
|
||||
left < threshold)) {
|
||||
// right
|
||||
openState('right', ins, ownerInstance)
|
||||
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
|
||||
leftWidth - left < threshold)) {
|
||||
// left
|
||||
openState('left', ins, ownerInstance)
|
||||
} else {
|
||||
// default
|
||||
openState('none', ins, ownerInstance)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 开启状态
|
||||
* @param {Boolean} type
|
||||
* @param {Object} ins
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function openState(type, ins, ownerInstance) {
|
||||
var state = ins.getState()
|
||||
var leftWidth = state.leftWidth
|
||||
var rightWidth = state.rightWidth
|
||||
var left = ''
|
||||
state.isopen = state.isopen ? state.isopen : 'none'
|
||||
switch (type) {
|
||||
case "left":
|
||||
left = leftWidth
|
||||
break
|
||||
case "right":
|
||||
left = -rightWidth
|
||||
break
|
||||
default:
|
||||
left = 0
|
||||
}
|
||||
|
||||
// && !state.throttle
|
||||
|
||||
if (state.isopen !== type) {
|
||||
state.throttle = true
|
||||
ownerInstance.callMethod('change', {
|
||||
open: type
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
state.isopen = type
|
||||
// 添加动画类
|
||||
ins.requestAnimationFrame(function() {
|
||||
ins.addClass('ani');
|
||||
move(left, ins, ownerInstance)
|
||||
})
|
||||
// 设置最终移动位置,理论上只要进入到这个函数，肯定是要打开的
|
||||
}
|
||||
|
||||
|
||||
function getDirection(x, y) {
|
||||
if (x > y && x > MIN_DISTANCE) {
|
||||
return 'horizontal';
|
||||
}
|
||||
if (y > x && y > MIN_DISTANCE) {
|
||||
return 'vertical';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置滑动状态
|
||||
* @param {Object} event
|
||||
*/
|
||||
function resetTouchStatus(instance) {
|
||||
var state = instance.getState();
|
||||
state.direction = '';
|
||||
state.deltaX = 0;
|
||||
state.deltaY = 0;
|
||||
state.offsetX = 0;
|
||||
state.offsetY = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置滑动开始位置
|
||||
* @param {Object} event
|
||||
*/
|
||||
function stopTouchStart(event) {
|
||||
var instance = event.instance;
|
||||
var state = instance.getState();
|
||||
resetTouchStatus(instance);
|
||||
var touch = event.touches[0];
|
||||
if (IS_HTML5 && isPC()) {
|
||||
touch = event;
|
||||
}
|
||||
state.startX = touch.clientX;
|
||||
state.startY = touch.clientY;
|
||||
}
|
||||
|
||||
/**
|
||||
* 滑动中，是否禁止打开
|
||||
* @param {Object} event
|
||||
*/
|
||||
function stopTouchMove(event) {
|
||||
var instance = event.instance;
|
||||
var state = instance.getState();
|
||||
var touch = event.touches[0];
|
||||
if (IS_HTML5 && isPC()) {
|
||||
touch = event;
|
||||
}
|
||||
state.deltaX = touch.clientX - state.startX;
|
||||
state.deltaY = touch.clientY - state.startY;
|
||||
state.offsetY = Math.abs(state.deltaY);
|
||||
state.offsetX = Math.abs(state.deltaX);
|
||||
state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
|
||||
}
|
||||
|
||||
function isPC() {
|
||||
var userAgentInfo = navigator.userAgent;
|
||||
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||
var flag = true;
|
||||
for (var v = 0; v < Agents.length - 1; v++) {
|
||||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||
flag = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
|
||||
var movable = false
|
||||
|
||||
function mousedown(e, ins) {
|
||||
if (!IS_HTML5) return
|
||||
if (!isPC()) return
|
||||
touchstart(e, ins)
|
||||
movable = true
|
||||
}
|
||||
|
||||
function mousemove(e, ins) {
|
||||
if (!IS_HTML5) return
|
||||
if (!isPC()) return
|
||||
if (!movable) return
|
||||
touchmove(e, ins)
|
||||
}
|
||||
|
||||
function mouseup(e, ins) {
|
||||
if (!IS_HTML5) return
|
||||
if (!isPC()) return
|
||||
touchend(e, ins)
|
||||
movable = false
|
||||
}
|
||||
|
||||
function mouseleave(e, ins) {
|
||||
if (!IS_HTML5) return
|
||||
if (!isPC()) return
|
||||
movable = false
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
showWatch: showWatch,
|
||||
touchstart: touchstart,
|
||||
touchmove: touchmove,
|
||||
touchend: touchend,
|
||||
mousedown: mousedown,
|
||||
mousemove: mousemove,
|
||||
mouseup: mouseup,
|
||||
mouseleave: mouseleave
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,87 +1,87 @@
|
|||
{
|
||||
"id": "uni-swipe-action",
|
||||
"displayName": "uni-swipe-action 滑动操作",
|
||||
"version": "1.2.4",
|
||||
"description": "SwipeAction 滑动操作操作组件",
|
||||
"keywords": [
|
||||
"",
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"滑动删除",
|
||||
"侧滑删除"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
{
|
||||
"id": "uni-swipe-action",
|
||||
"displayName": "uni-swipe-action 滑动操作",
|
||||
"version": "1.3.3",
|
||||
"description": "SwipeAction 滑动操作操作组件",
|
||||
"keywords": [
|
||||
"",
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"滑动删除",
|
||||
"侧滑删除"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,187 +7,5 @@
|
|||
|
||||
通过滑动触发选项的容器
|
||||
|
||||
> **注意事项**
|
||||
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
|
||||
> - swipeAction的跟手联动是非常考验性能的。为了提高交互体验，本组件在 app 端 vue 页面、h5、微信小程序使用了wxs 技术，nvue 页面使用 bindingx 技术，可以达到流畅的体验。在其他小程序平台由于底层不支持优化技术，只能使用使用普通 js ，此时性能一般。
|
||||
> - `uni-swipe-action` 和 `uni-swipe-action-item` 需要同时使用
|
||||
> - `uni-swipe-action` 不能嵌套在 `swiper` 中使用
|
||||
> - 长列表不建议使用 autoClose属性，会影响组件性能，造成卡顿，原因是打开之后要通知其他已经打开的组件关闭，会导致多个组件重新渲染
|
||||
> - 事件中传入 `$event` 获取额外参数
|
||||
> - 向下兼容，需要将 `options` 属性替换成 `right-options`
|
||||
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
||||
|
||||
### 安装方式
|
||||
|
||||
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||||
|
||||
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
||||
|
||||
|
||||
## 基本用法
|
||||
|
||||
在 ``template`` 中的使用
|
||||
|
||||
```html
|
||||
<uni-swipe-action>
|
||||
<!-- 基础用法 -->
|
||||
<uni-swipe-action-item :right-options="options" :left-options="options" @click="onClick" @change="change">
|
||||
<view>SwipeAction 基础使用场景</view>
|
||||
</uni-swipe-action-item>
|
||||
<!-- 使用插槽 （请自行给定插槽内容宽度）-->
|
||||
<uni-swipe-action-item>
|
||||
<template v-slot:left>
|
||||
<view><text>置顶</text></view>
|
||||
</template>
|
||||
<view>
|
||||
<text >使用插槽</text>
|
||||
</view>
|
||||
<template v-slot:right>
|
||||
<view><text>删除</text></view>
|
||||
</template>
|
||||
</uni-swipe-action-item>
|
||||
<!-- 混合用法 -->
|
||||
<uni-swipe-action-item :right-options="options">
|
||||
<template v-slot:left>
|
||||
<view><text>置顶</text></view>
|
||||
</template>
|
||||
<view><text>混合使用</text></view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
|
||||
<!-- 禁止滑动 -->
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item :disabled="true" :right-options="options">
|
||||
<view>SwipeAction 基础使用场景</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
|
||||
<!-- 按组使用 -->
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, index)">
|
||||
<view >item1</view>
|
||||
</uni-swipe-action-item>
|
||||
<uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, index)">
|
||||
<view>item2</view>
|
||||
</uni-swipe-action-item>
|
||||
<uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, index)">
|
||||
<view>item3</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
|
||||
```
|
||||
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
options:[
|
||||
{
|
||||
text: '取消',
|
||||
style: {
|
||||
backgroundColor: '#007aff'
|
||||
}
|
||||
}, {
|
||||
text: '确认',
|
||||
style: {
|
||||
backgroundColor: '#dd524d'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onClick(e){
|
||||
console.log('点击了'+(e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
|
||||
},
|
||||
swipeChange(e,index){
|
||||
console.log('当前状态：'+ e +'，下标：' + index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### SwipeAciton Props
|
||||
|
||||
|属性名|类型|可选值|默认值|是否必填|说明|
|
||||
|:-:|:-:|:-:|:-:|:-:|:-:|
|
||||
|show|String|left/right/none|none |否|开启关闭组件，auto-close = false 时生效|
|
||||
|threshold|Number|-|20|否|滑动阙值|
|
||||
|disabled|Boolean|-|false|否|是否禁止滑动|
|
||||
|autoClose|Boolean|-|true|否|其他组件开启的时候，当前组件是否自动关闭，**注意：长列表使用会有性能问题**|
|
||||
|left-options|Array/Object |-|-|否|左侧选项内容及样式|
|
||||
|right-options|Array/Object |-|-|否|右侧选项内容及样式|
|
||||
|
||||
#### LeftOptions & RightOptions Options
|
||||
|
||||
|参数|类型|是否必填 |说明|
|
||||
|:-:|:-:|:-:|:-:|
|
||||
|text|String|是|按钮的文字 |
|
||||
|style|Object|否|按钮样式{backgroundColor,color,fontSize}，backgroundColor默认为：#C7C6CD，color默认为：#FFFFFF，fontSize默认为：14px |
|
||||
|
||||
|
||||
|
||||
### SwipeAction Events
|
||||
|
||||
|事件称名 |说明|返回值|
|
||||
|:-:|:-:|:-:|
|
||||
|@click|点击选项按钮时触发事件|e = {content,index} ，content（点击内容）、index（下标）、position (位置信息) |
|
||||
|@change|组件打开或关闭时触发|left:左侧 ，right：右侧，none：关闭|
|
||||
|
||||
### SwipeAction Methods
|
||||
|
||||
方法通过 ref 调用
|
||||
|
||||
|方法称名 |说明|
|
||||
|:-:|:-:|
|
||||
|resize()|动态添加数据后，如不能正常滑动，需要主动调用此方法，微信小程序、h5、app-vue 不生效|
|
||||
|close-all()|关闭所有已经打开的组件|
|
||||
### SwipeAction Slots
|
||||
|
||||
|名称|说明|
|
||||
|:-:|:-:|
|
||||
|-|默认插槽自定义显示内容|
|
||||
|default|默认内容插槽|
|
||||
|left|左侧滑动内容 ，会覆盖 leftOptions 内容|
|
||||
|right|右侧滑动内容 ，会覆盖 rightOptions 内容|
|
||||
|
||||
> **提示**
|
||||
> - iOS 端由于存在bounce效果，滑动体验略差，建议禁止bounce效果，禁止方式如下：
|
||||
> ```javascript
|
||||
> {
|
||||
> "path": "swipe-action/swipe-action",
|
||||
> "style": {
|
||||
> "navigationBarTitleText": "SwipeAction 滑动操作",
|
||||
> "disableScroll":true,
|
||||
> "app-plus":{
|
||||
> "bounce":"none"
|
||||
> }
|
||||
> }
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
### Q&A
|
||||
1. Q：动态加载数据，组件滑动失效是怎么回事
|
||||
- A：是因为组件会在加载的时候获取相应的节点信息数据 ，获取需要滑动的距离，所以有时候动态加载数据之后，可能是时机的问题，导致节点信息获取失败 ，那么组件就不能正常滑动。
|
||||
- A：如果是在其他页面通过 vuex 或者uni.$emit 等手段来更新其他页面 uni-swipe-action 数据 ，同样会发生不能滑动的现象，原因是页面隐藏后是不能获取到页面信息的，所以回到 uni-swipe-action 页面后，新增的组件节点信息获取肯定是错误的，所以不能滑动。
|
||||
- A：值的高兴的是在 1.2.2 版本中重构了组件滑动逻辑 ，在微信小程序、h5、app-vue 中使用了 wxs 优化滑动性能，并且不需要担心动态新增组件导致组件无法滑动的问题，节点信息在滑动时实时获取。
|
||||
- A：因为其他平台无法使用 wxs ，所以还是会出现无法滑动的问题怎么处理？1.2.2 版本提供了 resize() 方法，无法滑动时调用 resize() 方法重新渲染组件即可，调用方法时要保证节点已经渲染完毕。
|
||||
|
||||
2. Q：运行到 nvue 下没有样式
|
||||
- A：因为 nvue 下样式默认不能使用复杂的css选择器，所以需要在 manifest.json 中配置 "nvueStyleCompiler" 属性
|
||||
```json
|
||||
// manifest.json
|
||||
{
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
}
|
||||
```
|
||||
|
||||
## 组件示例
|
||||
|
||||
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/swipe-action/swipe-action](https://hellouniapp.dcloud.net.cn/pages/extUI/swipe-action/swipe-action)
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swipe-action)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
Loading…
Reference in New Issue