他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)解决微信小程序自定义弹窗滚动与页面滚动冲突 - 简书
解决微信小程序自定义弹窗滚动与页面滚动冲突
我一直在想什么样的标题才能描述清楚我想要说的问题，文章中不会写如何创建自定义弹窗,如果有这类需求的同学请移步自行Google。
最近在做微信小程序的开发，涉及到自定义弹窗，然而当我的表单页面过长，同时自定义弹窗也过长，即两者都需要滚动的时候，问题出现了，如下图所示：
问题：当我滚动弹窗时，后面的页面也会跟着滚动
1.最初我以为是样式文件中z-index属性的问题，但无论我怎么修改z-index属性，都无果而终。
2.怀疑是我的布局结构不合理，但无论是蒙版布局还是整体布局，以及弹窗的布局，改了又改，换了又换，这个问题依然存在
折腾了好久以后，突然有了想法：
在打开弹窗的时候，让页面不可滚动；关闭弹窗后，恢复页面滚动
实现步骤：
1.整个布局用&scroll-view&作为根节点包裹所有view，并动态绑定scroll-view的scroll-y属性&scroll-view scroll-y="{{isScroll}}"&
2.样式文件中设置Page的overflow-y属性值为hidden
3.样式文件中设置scroll-view的height属性值为100%
4.打开自定义弹窗的点击事件中，更改isScroll的值为false，关闭弹窗的点击事件中，更改isScroll的值为true
结果如下图：
result.gif
这样就解决了弹窗与页面的滑动冲突，算是投机取巧吧，有碰到这个问题的同学可以参考一下，如果有疑问或者更好的解决办法，麻烦告知我，在此谢过~
下面，附上demo的源代码：
// text005.js
* 页面的初始数据
arrayData: null,
dialogData: null,
isDialogShow: false,
isScroll: true
* 生命周期函数--监听页面加载
onLoad: function (options) {
//构建测试数据
let data = new Array();
let dialog = new Array();
for(let i = 0; i & 25; i++){
data[i] = '我是测试-----------' +
dialog[i] = {
name: '我是弹窗-' + i,
isSelected: false
this.setData({
arrayData: data,
dialogData : dialog
* 显示、关闭弹窗
showDialog: function (e) {
var currentStatu = e.currentTarget.dataset.
console.log('currentStatu:', currentStatu);
if (currentStatu == "close") {
this.setData({
isDialogShow: false,
isScroll: true
if (currentStatu == "open") {
this.setData({
isDialogShow: true,
isScroll: false
&!--text005.wxml--&
&scroll-view scroll-y="{{isScroll}}"&
&view class="rootView"&
&view class="inTable"&
&view wx:for="{{arrayData}}" wx:key="" class="unitItemLeft" bindtap="showDialog" data-statu="open"&
&input class="baseItemWithBorder" value="{{item}}"
disabled /&
&!--测试弹窗--&
&view class="dialogMarsk" bindtap="showDialog" data-statu="close" wx:if="{{isDialogShow}}"&&/view&
&!--dialog--&
&view class="dialog" wx:if="{{isDialogShow}}"&
&view class="appreciationTitle"&
&text style="font-size:24"&我是弹窗&/text&
&view wx:for="{{dialogData}}" class="appreciationTable"&
&view class="unitItemLeft"&
&text class="baseItemWithBorder"&{{item.name}}&/text&
&/scroll-view&
/* text005.wxss */
/* background: #1 */
font-size: 36
width: 100%;
height: 100%;
background: #FAFAFA;
overflow-y:
scroll-view {
height: 100%;
.rootView{
/* width: 100%; */
padding: 10
flex-direction:
.baseItemWithBorder{
flex-grow: 1;
height: 100%;
padding-left: 20
padding-right: 20
border-bottom: solid 1
width: 100%;
box-shadow:5px 5px 10
flex-direction:
margin-top: 40
background:
.inDetail{
width: 100%;
height: 80
.unitLeft{
justify-content: flex-
padding-left: 20
.unitItemLeft{
width: 100%;
height: 80
flex-direction:
.dialogMarsk {
width: 100%;
height: 100%;
z-index: 1000;
background: rgba(0, 0, 0, 0.6);
width: 80%;
height: 50%;
z-index: 1001;
background: #FAFAFA;
border-radius: 3
overflow-y:
.appreciationTable{
width: 98%;
flex-direction:
background:
margin: 0 10
.appreciationTitle{
width: 100%;
flex-direction:
align-items:
justify-content:
margin-top: 20
margin-bottom: 20
爱好摄影、android开发、java开发，爱好互联网
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注
09:45字数 61697阅读 3316评论 2喜欢 85 用到的组件 1、通过CocoaPods安装 项目名称 项目信息 AFNetworking 网络请求组件 FM...
用到的组件1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SDWebImage多个缩略图缓存组件 UICKeyChainStore存放用户账号密码组件 Reachability监测网络状态 DateTools友好...
声明：文章来源网络转载，我在这做了一个整合，方便大家查阅，持续更新。 01：概述 文 | 周中坚 美团点评工程师，4年 Web 前端开发经验，主要负责过会员卡、外卖、预订、商家平台等业务的前端开发，现在是美团点评点餐团队的一员。 如果你看过《张小龙首次全面阐述小程序》这篇文...
半夜霜花舞，千山落雪松。 空潭秋泻尽，对月敛词穷。 注：中华新韵，首句仄起不入韵。
“ASO课堂开讲到现在一月有余，ASO的入门知识基本覆盖到了。既然是围绕App Store来玩，今天公子也跟大家唠叨些App Store小内幕——加急审核，或许对iOS端APP开发小伙伴有些小帮助。” 一、App Store应用审核规则 1 审核时间规律 应用提交到App ...
把玛雅的商城和数据拆开了（maya.io/shop/和maya.io/data/），本来用的shop，写完代码，突然想起还有store和mall，到底哪个是对的？拿不准……查了下字典，store是超市的意思，shop是小店。再看看各个网站用什么： 都有人用。Google和A...
第42篇原创 不是抱怨，而是反思：移动互联网弯道超车时代，没有前瞻性的券商只会被甩出悬崖。 1 说起券商最“苦逼”的从业人员，大家首先想到的一定是一线的券商客户经理们。 他们是冲锋在一线的打仗的士兵，为开发客户常年寄人篱下于银行网点，奔走于大街小巷客户之间，无时无刻不连接于...
文章作者：Tyan博客：noahsnail.com 1. 运行Hello world docker run 运行一个容器 ubuntu 镜像名字 -t 一个新容器内部的伪终端 -i 能与容器进行交互，交互模式 /bin/bash 在容器内启动Bash shell -d 后台...微信小程序页面滚动，元素布局信息8 months ago我们看到微信一直在努力。微信基础库1.4.0更新 新增 API
pageScrollTo
使页面滚动到指定位置
增加 页面事件 onPageScroll 监听页面滚动事件。微信DOM节点是不是很开心？还有一个更让你开心消息。当你还在困恼，微信小程序没有DOM，和BOM的时候。今天微信默默的更新了一个重要的API。新增 API createSelectorQuery 获取元素布局信息对没错，你可以通过这个API获取到页面你需要的节点的信息，作为一个有信仰的攻城狮。我相信你一定不希望这这里粘贴复制大量的文档内容。所以请前去官方文档查看这个API吧。作为一个整体为了公司个性化需求而不停跳坑的攻城狮，今天微信开放的这个接口真的是振奋人心。笔者
GITHUB:ckaiCp
segmentfault:ckaiCp 茶的故事，为您泡一杯好茶。20收藏分享举报{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\u002Fpay.zhihu.com\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[],&title&:&微信小程序页面滚动，元素布局信息&,&author&:&kaychan-15&,&content&:&\u003Cp\u003E那是日微信的一次更新，还记得我们跳过的那些坑终于解决了。\u003C\u002Fp\u003E\u003Cp\u003E笔者写这个篇文章的时候，正在（茶的故事）公司的一个项目中跳坑到哭，各种需求难以实现。今天的更新真的解决了不少问题，笔者真忍不住要来跟那些平时不怎么看更新日志的攻城狮分享下了。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E页面滚动\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E在今天之前的时空，小程序的攻城狮们，如果你们想控制小程序的页面滚动。抱歉，请呼叫您的用户点击标题栏，回到顶部，或者您可以使用scroll-view这个原声的组件。\u003C\u002Fp\u003E\u003Cp\u003E温馨提示：scroll-view限制\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003EBug & Tip\n\ntip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件\ntip: scroll-into-view 的优先级高于 scroll-top\ntip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh\ntip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E我们看到微信一直在努力。\u003C\u002Fp\u003E\u003Cp\u003E微信基础库1.4.0更新\u003C\u002Fp\u003E\u003Cp\u003E 新增 API
pageScrollTo
使页面滚动到指定位置
\u003C\u002Fp\u003E\u003Cp\u003E 增加 页面事件 onPageScroll 监听页面滚动事件。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E微信DOM节点\u003C\u002Fh2\u003E\u003Cp\u003E是不是很开心？\u003C\u002Fp\u003E\u003Cp\u003E还有一个更让你开心消息。当你还在困恼，微信小程序没有DOM，和BOM的时候。\u003C\u002Fp\u003E\u003Cp\u003E今天微信默默的更新了一个重要的API。\u003C\u002Fp\u003E\u003Cp\u003E新增 API createSelectorQuery 获取元素布局信息\u003C\u002Fp\u003E\u003Cp\u003E对没错，你可以通过这个API获取到页面你需要的节点的信息，作为一个有信仰的攻城狮。我相信你一定不希望这这里粘贴复制大量的文档内容。所以请前去官方文档查看这个API吧。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E作为一个整体为了公司个性化需求而不停跳坑的攻城狮，今天微信开放的这个接口真的是振奋人心。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E笔者
GITHUB:ckaiCp\u003C\u002Fp\u003E\u003Cp\u003E
segmentfault:ckaiCp \u003C\u002Fp\u003E\u003Cp\u003E茶的故事，为您泡一杯好茶。\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E&,&updated&:new Date(&T02:11:53.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:9,&collapsedCount&:0,&likeCount&:20,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-33cca579f69df7d2ac08_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&微信小程序&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&JavaScript&}],&adminClosedComment&:false,&titleImageSize&:{&width&:1210,&height&:544},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&tipjarState&:&closed&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:9,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T10:11:53+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&业余编程爱好者、职业算账的&,&isFollowing&:false,&hash&:&f814e8c5c989&,&uid&:56,&isOrg&:false,&slug&:&vayn&,&isFollowed&:false,&description&:&Vayn a.k.a. VT&,&name&:&Vayn&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fvayn&,&avatar&:{&id&:&77c7d7b6c&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&微信小程序、H5应用、app应用产品设计与开发。&,&isFollowing&:false,&hash&:&cce2bcbbac86872c1abb31b&,&uid&:24,&isOrg&:false,&slug&:&an-an-67-35&,&isFollowed&:false,&description&:&微信小程序、H5应用、app应用产品设计与开发。\n\n微信号：im-anyu&,&name&:&安逗儿&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fan-an-67-35&,&avatar&:{&id&:&v2-0a80d2fb2&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&我应该更努力。&,&isFollowing&:false,&hash&:&6a25cda39e720aae7b180&,&uid&:52,&isOrg&:false,&slug&:&zoubin&,&isFollowed&:false,&description&:&&,&name&:&洲滨&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fzoubin&,&avatar&:{&id&:&v2-db6c5ab77ca&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&时刻在减肥的吃货一枚&,&isFollowing&:false,&hash&:&ce905d516aa&,&uid&:742500,&isOrg&:false,&slug&:&nuan-nuan-wei-feng-42-95&,&isFollowed&:false,&description&:&时刻在减肥的吃货一枚，有一个公众号（YTSNmissvera777）不定期更新&,&name&:&暖暖微风&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fnuan-nuan-wei-feng-42-95&,&avatar&:{&id&:&f32e8c7c5a3bbeff763f58&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&竹杖芒鞋轻胜马，谁怕！&,&isFollowing&:false,&hash&:&49d4d13fac0f50cba1ae09fce7c7aa33&,&uid&:989700,&isOrg&:false,&slug&:&yue-hao-62-85&,&isFollowed&:false,&description&:&&,&name&:&谦信&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fyue-hao-62-85&,&avatar&:{&id&:&v2-f0c39bc5cb63e&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&那是日微信的一次更新，还记得我们跳过的那些坑终于解决了。笔者写这个篇文章的时候，正在（茶的故事）公司的一个项目中跳坑到哭，各种需求难以实现。今天的更新真的解决了不少问题，笔者真忍不住要来跟那些平时不怎么看更新日志的攻城狮分享下…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&annotationDetail&:null,&commentsCount&:9,&likesCount&:20,&FULLINFO&:true}},&User&:{&kaychan-15&:{&isFollowed&:false,&name&:&Kay.Chan&,&headline&:&&,&avatarUrl&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-813bdd1dc7_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&kaychan-15&,&bio&:&在云垂大陆叫米多多的战士。&,&hash&:&f0af5ef1a1cac5c17ab136c9df42d81a&,&uid&:649600,&isOrg&:false,&description&:&&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fkaychan-15&,&avatar&:{&id&:&v2-813bdd1dc7&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&navi&:&1&,&growthSearch&:&s2&,&nwebQAGrowth&:&experiment&,&qawebRelatedReadingsContentControl&:&close&,&liveStore&:&ls_a2_b2_c1_f2&,&nwebSearch&:&nweb_search_heifetz&,&vdlc&:&e&,&rt&:&y&,&isOffice&:&false&,&enableTtsPlay&:&post&,&newLiveFeedMediacard&:&new&,&newMobileAppHeader&:&true&,&androidPassThroughPush&:&all&,&hybridZhmoreVideo&:&yes&,&nwebGrowthPeople&:&default&,&nwebSearchSuggest&:&default&,&qrcodeLogin&:&qrcode&,&enableVoteDownReasonMenu&:&enable&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&growthBanner&:&default&,&newMobileColumnAppheader&:&new_header&,&androidDbRecommendAction&:&open&,&biu&:&1&,&info&:&1&,&androidDbFeedHashTagStyle&:&button&,&appStoreRateDialog&:&close&,&mobileFeedGuide&:&block&,&default&:&None&,&isNewNotiPanel&:&no&,&biua&:&1&,&zcmLighting&:&zcm&,&adR&:&b&,&wechatShareModal&:&wechat_share_modal_show&,&uRe&:&0&,&androidProfilePanel&:&panel_b&}},&columns&:{&next&:{}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&switches&:{&couldSetPoster&:false},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&updating&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{&baidu&:false,&yidianzixun&:false,&qqnews&:false},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false,&userAgent&:{&ua&:&Mozilla\u002F5.0 (compatible, MSIE 11, Windows NT 6.3; Trident\u002F7.0; rv:11.0) like Gecko&,&browser&:{&name&:&IE&,&version&:&11&,&major&:&11&},&engine&:{&version&:&7.0&,&name&:&Trident&},&os&:{&name&:&Windows&,&version&:&8.1&},&device&:{},&cpu&:{}}},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}微信小程序开发点击按钮常见问题解决_Hi小程序
行业解决方案
整体解决方案
重点系统推荐
微信小程序开发点击按钮常见问题解决
|HiShop|阅读量：
导读：日，微信小程序开发点击按钮已经是当下最热门的话题，下面将从多方面来谈微信小程序开发点击按钮相关的内容。...
最新消息，Hi小程序小编了解到，微信小程序开发点击按钮常见问题解决。
点击按钮已经是当下最热门的话题，下面将从多方面来谈微信小程序开发点击按钮相关的内容。
在互联网应用中，我们经常用到的场景，比如用户点击某个按钮，触发的操作会和后台api进行数据交互，生成一些记录，比如下单购买。如果后台api请求比较慢，而客户端体验又做得不到位，导致用户以为没点击到或者是页面假死，在上次请求还没处理完，就再次点击按钮。这样会导致某个操作生成多次记录，导致一些异常的bug。
很显然，后台的api在这方面是需要做好处理。然而，面对用户，我们需要更好的体验，可以在客户端去避免这些问题，前置地解决问题。
最近听产品经理常说，用户点击某个按钮多次，后台还没处理完导致多笔记录生成，我们需要在用户点击后跳转到一个新的页面，其实这根本不是跳页问题，是程序问题。如果程序员真这么干，是不是要下岗了。
以前偷懒的时候，在前端我们可能会这么处理：
var getUserDataFlag =
function getUserData() {
&if (getDataFlag) {
&getDataFlag =
& &url: '/xxx/getUser',
& &success: function () {
& & &getUserData =
& & &//todo
& &error: function () {
& & &getUserData =
//当接口很多的时候，我们的代码就变成这样
var getUserAssetFlag =
function getUserAsset() {
&if (getDataFlag) {
&getDataFlag =
& &url: '/xxx/getUserAsset',
& &success: function () {
& & &getUserAssetFlag =
& & &//todo
& &error: function () {
& & &getUserAssetFlag =
上面的例子你会发现，当接口越来越多，维护请求状态的变量将会越来越多，并且当存在依赖时，维护成本更高，也更容易出错。
如何优雅地解决这样的问题，其实封装一下请求就能简单又能自动地处理这个问题。
下面我们以微信小程序请求后台数据为例解说：
import {isObject} from './util'
let Promise = require('../libs/bluebird.min')
let requestList = {} //api请求记录
// 将当前请求的api记录起来
export function addRequestKey (key) {
& &requestList[key] = true
// 将请求完成的api从记录中移除
export function removeRequestKey (key) {
& &delete requestList[key]
//当前请求的api是否已有记录
export function hitRequestKey (key) {
& &return requestList[key]
// 获取串行请求的key,方便记录
export function getLockRequestKey (data) {
& &if (!isObject(data)) {
& & & &return data
& &let ajaxKey = 'lockRequestKey:'
& & & &ajaxKey += JSON.stringify(data)
& &} catch (e) {
& & & &ajaxKey += data
& &return ajaxKey
//根据请求的地址，请求参数组装成api请求的key,方便记录
export function getRequestKey (data) {
& &if (!isObject(data)) {
& & & &return data
& &let ajaxKey = 'Method: ' + data.method + ',Url: ' + data.url + ',Data: '
& & & &ajaxKey += JSON.stringify(data.data)
& &} catch (e) {
& & & &ajaxKey += data.data
& &return ajaxKey
//所有与服务器进行http请求的出口
export function http (data) {
& &if (!isObject(data)) {
& & & &throw Error('ajax请求参数必须是json对象: ' + data)
& &data.method = (data.method || 'GET').toUpperCase()
& &//下面5行是对所有http请求做防重复请求处理，后面单独分享原理
& &let ajaxKey = getRequestKey(data)
& &if (hitRequestKey(ajaxKey)) {
& & & &throw Error('重复提交请求：' + ajaxKey)
& &addRequestKey(ajaxKey)
& &//bluebird.js包装成promisepromise api
& &return new Promise(function (resolve, reject) {
& & & &//通过wx.request api 向服务器端发出http请求
& & & &wx.request({
& & & & & &url: data.url,
& & & & & &data: data.data,
& & & & & &method: data.method,
& & & & & &header: data.header || {'Content-Type': 'application/json'},
& & & & & &complete: function (res) {
& & & & & & & &// 请求完成，释放记录的key，可以发起下次请求了
& & & & & & & &removeRequestKey(ajaxKey)
& & & & & & & &let statusCode = res.statusCode
& & & & & & & &if (statusCode === 200 || statusCode === 304) {
& & & & & & & & & &return resolve(res.data)
& & & & & & & &}
& & & & & & & &return reject(res)
& & & & & &}
//通用get请求方法
export function httpGet (data) {
& &return http(data)
//通用post请求方法
export function httpPost (data) {
& &data.method = 'POST'
& &return http(data)
// 该方法适用于串行请求的api
export function lockRequest (data, fn) {
& &let ajaxKey = getLockRequestKey(data)
& &if (hitRequestKey(ajaxKey)) {
& & & &throw Error('重复提交请求：' + ajaxKey)
& &addRequestKey(ajaxKey)
& &return new Promise(function (resolve, reject) {
& & & &fn(data)
& & & & & &.then(function (data) {
& & & & & & & &removeRequestKey(ajaxKey)
& & & & & & & &return resolve(data)
& & & & & &})
& & & & & &.catch(function (error) {
& & & & & & & &removeRequestKey(ajaxKey)
& & & & & & & &return reject(error)
& & & & & &})
整体思路就是统一所有请求的入口，然后以API请求的地址，参数，请求类型(get,post)等组装为唯一key缓存起来。这样就能知道某个请求的完成状态，当第二个相同的请求过来时，我们可以根据上一次的状态来判断下一步的操作。
文章分享到：
移动云商城
一款会赚钱的网上商城系统——移动云商城，让零售企业转型电商更简单！独创6合一全网营销模式、裂变式推广分佣快速吸粉引流，不论微信、APP、手机触屏还是PC端网上购物商城，只要1个后台即可掌控全网最火爆的6大商城！
关注HiShop
|||||||软件企业编号：湘R-高新技术企业编号：GR软件产品编号：湘DGY-软件著作权登记号： 湖南省职业经理人协会理事长沙市电子商务协会理事长沙市软件协会会员长沙服务外包行业协会会员Copyright(C) Hishop网店系统商城系统微信商城系统分销系统All Rights Reserved.湘ICP备号官方微信>>>