- textarea在模态框中定位问题
基于上次提的bug (https://developers.weixin.qq.com/community/develop/doc/000806ba7147a0418c5770eb05a400) 没有答复,为了修复能修复这个textarea的一些bug,我是操碎了心,前后弄了差不多1个月,还没解决。 (提供的代码片段需要在真机上才能复现) 问题如下: textarea 显示在自定义的 modal 底部,当 textarea 获得焦点的时候(由于textarea是多行输入框),显示不全,当输入内容或者回车几行之后,textarea往上移动才能显示全,当删除textarea内容时,textarea又回到显示不全的状态。因此我想到另一种方案来解决,就是设置textarea为浮动同时,根据textarea是否获得焦点来动态设置 距离顶部的距离,现在又遇到的问题是,每次弹出键盘都会把页面往上顶,导致设置的top值无效,textarea换行时又恢复正常。 口述无凭,有录视频为证 https://pan.baidu.com/s/1e-S8H7CUc8nasXImAbDiNQ
2018-09-29 - textarea在modal中显示不全
- 当前 Bug 的表现(可附上截图) textarea 在真机上的问题比较多,除了常见的 z-index 层级贼高外,还有如下问题。我们有一个列表页和详情页,有从列表页进入详情操作,还有从列表页进入详情页同时弹出评论输入框。再此遇到问题如下 1. 没有设置 cursor-spacing 时,在真机上表现如下 小米note3显示如下 [图片] (textarea有设置高度的,此处显示不全,且还有个按钮完全被遮盖住了) 红米2A (android 低端机,微信版本是最新的,Android系统是4.4.4) 显示如下 [图片] (textarea完全被遮盖住了) 当输入内容足够多或者按键盘回车时,才能把textarea显示全 小米note3如下 [图片] 红米2A 显示如下 [图片] 2. 当我在代码中设置了 cursor-spacing 时,显示正常,textarea 能完全显示,但是,输入内容过多换行时或者敲回车时 textarea 会往上顶,不过多出了一块空白的区域 [图片] - 预期表现 不管textarea有没有输入内容,textarea 都能显示全,且输入内容或者换行时,textarea不会随内容往上移 - 复现路径 - 提供一个最简复现 Demo 代码片段: wechatide://minicode/icer4kmm7U2b
2018-09-10 - 小程序屏幕旋转
建议小程序支持横屏。 由于小程序不支持横屏,所以使用了 transform的 rotate将页面最外层的 view 组件 旋转了90度实现横屏效果。 再使用swiper时遇到左右滑动swiper时,子项上下滚动,设置上下滚动时,swiper子项左右滚动。 事实上页面还是竖屏,只是把页面内容旋转了而已。 手势↕️滑动,swiper↔️切换了。手势↔️滑动,swiper↕️切换了。 [图片]
2018-06-28 - swiper手势滑动和图片滚动
由于小程序不支持横屏,而产品需求又必须是横屏操作。 然后我在 wxml 整个外层包了个 view ,并使用样式将其旋转了 90度。transform: rotate(90deg); 页面中使用了 swiper,然后手势滑动操作就出现和预期不一样的效果。如下所示。 [图片] 手势 ⬅️ ➡️ 滑动的时候,图片是 ⬆️⬇️ 切换。 然后设置了 swiper 的vertical 属性后如下。 [图片] 手势⬆️⬇️ 滑动的时候,图片是 ⬅️ ➡️ 切换。 wxml 页面代码如下 [代码]<[代码][代码]view[代码] [代码]style[代码][代码]=[代码][代码]'transform: rotate(90deg);width:{{windowHeight}}px;height:{{windowWidth}}px;transform-origin:{{windowWidth/2}}px 50%;'[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]swiper[代码][代码] circular vertical current='{{currentDesign}}' bindchange='handSwiperChange'>[代码][代码] [代码][代码]<[代码][代码]swiper-item[代码] [代码]wx:for[代码][代码]=[代码][代码]'{{designList}}'[代码] [代码]wx:key[代码][代码]=[代码][代码]'design{{item.designid}}'[代码] [代码]item-id[代码][代码]=[代码][代码]'{{item.designid}}'[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]image[代码] [代码]src[代码][代码]=[代码][代码]'{{item.imageurl_big}}'[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'planname'[代码][代码]>{{item.name}}</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]image[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]swiper-item[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]swiper[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码] 整个页面旋转 90 度之后,swiper 手势上下滑动时,轮播变成了左右切换了。手势左右滑动时,轮播变成了上下切换了。
2018-06-12 - scrollview不兼容iOS9.3.5
在 iPhone手机 系统是iOS9.3.5 上显示的是如下的异常效果。 [图片] 正常的显示应该如下 [图片] 现在把关键代码和样式贴下 wxml [代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'section'[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]navigator[代码] [代码]url[代码][代码]=[代码][代码]'/pages/user/enjoy'[代码] [代码]class[代码][代码]=[代码][代码]'head'[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'title'[代码][代码]>我喜欢的方案</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]image[代码] [代码]src[代码][代码]=[代码][代码]'{{imgMap.arrowUp}}'[代码][代码]></[代码][代码]image[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]navigator[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]scroll-view[代码] [代码]scroll-x>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'content'[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]block[代码] [代码]wx:if='{{myEnjoyList.length > 0}}'>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'item'[代码] [代码]wx:for[代码][代码]=[代码][代码]'{{myEnjoyList}}'[代码] [代码]wx:key[代码][代码]=[代码][代码]'enjoyItem{{index}}'[代码] [代码]data-index[代码][代码]=[代码][代码]'{{index}}'[代码] [代码]bindtap[代码][代码]=[代码][代码]'onTapEnjoyItem'[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]image[代码] [代码]src[代码][代码]=[代码][代码]'{{item.imgsrc}}'[代码] [代码]/>[代码][代码] [代码][代码]<[代码][代码]view[代码][代码]>{{item.title}}</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]block[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]wx:else [代码][代码]class[代码][代码]=[代码][代码]'empty'[代码][代码]>您还没有收藏过喜欢的方案哦!</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]scroll-view[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码] wxss [代码].section {[代码][代码] [代码][代码]background-color[代码][代码]: [代码][代码]white[代码][代码];[代码][代码]}[代码] [代码].section .head {[代码][代码] [代码][代码]display[代码][代码]: flex;[代码][代码] [代码][代码]flex-[代码][代码]direction[代码][代码]: row;[代码][代码] [代码][代码]justify-[代码][代码]content[代码][代码]: space-between;[代码][代码] [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码] [代码][代码]padding[代码][代码]: [代码][代码]0[代码] [代码]30[代码][代码]rpx;[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]118[代码][代码]rpx;[代码][代码]}[代码] [代码].section .head .title {[代码][代码] [代码][代码]font-weight[代码][代码]: [代码][代码]bold[代码][代码];[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]36[代码][代码]rpx;[代码][代码]}[代码] [代码].section .head image {[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]32[代码][代码]rpx;[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]32[代码][代码]rpx;[代码][代码] [代码][代码]transform: rotate([代码][代码]90[代码][代码]deg);[代码][代码] [代码][代码]opacity: [代码][代码]0.4[代码][代码];[代码][代码] [代码][代码]filter: alpha(opacity=[代码][代码]40[代码][代码]);[代码][代码]}[代码] [代码].content {[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]230[代码][代码]rpx;[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]auto[代码][代码];[代码][代码] [代码][代码]display[代码][代码]: flex;[代码][代码] [代码][代码]flex-[代码][代码]direction[代码][代码]: row;[代码][代码] [代码][代码]background-color[代码][代码]: [代码][代码]#fdfdfd[代码][代码];[代码][代码] [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码] [代码][代码]padding[代码][代码]: [代码][代码]0[代码] [代码]20[代码][代码]rpx;[代码][代码]}[代码] [代码].content .item {[代码][代码] [代码][代码]display[代码][代码]: flex;[代码][代码] [代码][代码]flex-[代码][代码]direction[代码][代码]: column;[代码][代码] [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码] [代码][代码]padding-right[代码][代码]: [代码][代码]20[代码][代码]rpx;[代码][代码]}[代码] [代码].content .item image {[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]150[代码][代码]rpx;[代码][代码] [代码][代码]border-radius: [代码][代码]6[代码][代码]rpx;[代码][代码]}[代码] [代码].content .item view {[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]28[代码][代码]rpx;[代码][代码] [代码][代码]color[代码][代码]: [代码][代码]#666[代码][代码];[代码][代码] [代码][代码]margin-top[代码][代码]: [代码][代码]10[代码][代码]rpx;[代码][代码] [代码][代码]white-space[代码][代码]: [代码][代码]nowrap[代码][代码];[代码][代码] [代码][代码]text-[代码][代码]overflow[代码][代码]: ellipsis;[代码][代码] [代码][代码]overflow[代码][代码]: [代码][代码]hidden[代码][代码];[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]270[代码][代码]rpx;[代码][代码] [代码][代码]text-align[代码][代码]: [代码][代码]center[代码][代码];[代码][代码]}[代码] [代码].space {[代码][代码] [代码][代码]border-top[代码][代码]: [代码][代码]20[代码][代码]rpx [代码][代码]#eee[代码] [代码]solid[代码][代码];[代码][代码]}[代码] [代码].empty {[代码][代码] [代码][代码]display[代码][代码]: flex;[代码][代码] [代码][代码]justify-[代码][代码]content[代码][代码]: [代码][代码]center[代码][代码];[代码][代码] [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]32[代码][代码]rpx;[代码][代码] [代码][代码]color[代码][代码]: [代码][代码]#999[代码][代码];[代码][代码]}[代码] 其他android手机或开发工具都正常显示,目前发现就只有在 iOS9.3.5( iOS9的其他版本没测过)出现问题。
2018-06-11 - toast组件设置了icon为none,显示的时候还是占用了icon高度
wxml 代码片段 <button class="btn" bindtap="onToast">toast</button> <toast hidden='{{toast.hidden}}' icon='{{toast.icon}}' mask='{{toast.mask}}' duration='{{toast.duration}}' bindchange='onToastChange'>{{toast.title}}</toast> js代码片段 data: { toast: { hidden: true, icon: 'none', duration: 1000, title: '我是默认值', mask: false } }, onToast() { this.setData({ toast: { hidden: false, icon: 'none', duration: 3000, title: '你好', mask: false } }); }, onToastChange(e) { console.log('onToastChange', e); this.setData({ toast: { hidden: true } }); }, (图中我业务需要,旋转了90度)请忽略。竖屏我试过也是一样 [图片] 我在wxml中 toast的icon设置为none了,内容也显示出来了,但是高度似乎还是保留了icon存在时的高度。
2018-05-16 - 获取二维码返回二进制,服务端后台如何保存?
我使用 nodejs 调用的https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html 获取二维码二进制数据,保存成图片后,图片打不开。 [图片] 最后直接保存成 qr.png [图片] 尝试过将返回的数据流进行utf8,binary 等其他格式编码保存成图片,还是无法查看。官方能不能在这个接口返回的数据流作下详情说明或者给个demo啊。
2018-04-28 - captureScreen在真机上返回.unknown文件
[代码] [代码][代码]const canI = wx.canIUse([代码][代码]'captureScreen'[代码][代码]);[代码][代码] [代码][代码]if[代码] [代码](canI) {[代码][代码] [代码][代码]wx.captureScreen({[代码][代码] [代码][代码]success: (res) => {[代码][代码] [代码][代码]console.log([代码][代码]'屏幕截屏'[代码][代码], res);[代码][代码] [代码][代码]wx.saveImageToPhotosAlbum({[代码][代码] [代码][代码]filePath: res.tempFilePath,[代码][代码] [代码][代码]success: () => {[代码][代码] [代码][代码]console.log([代码][代码]'图片保存成功'[代码][代码]);[代码][代码] [代码][代码]wx.showToast({ title: [代码][代码]'图片保存成功'[代码] [代码]})[代码][代码] [代码][代码]},[代码][代码] [代码][代码]fail: (e) => {[代码][代码] [代码][代码]console.log([代码][代码]'saveImageToPhontosAlbum fail'[代码][代码], e);[代码][代码] [代码][代码]},[代码][代码] [代码][代码]complete: () => {[代码][代码] [代码][代码]console.log([代码][代码]'saveImageToPhontosAlbum complete'[代码][代码]);[代码][代码] [代码][代码]}[代码][代码] [代码][代码]});[代码][代码] [代码][代码]},[代码][代码] [代码][代码]fail: (e) => {[代码][代码] console.log([代码][代码]'captureScreen fail'[代码][代码], e);[代码][代码] [代码][代码]},[代码][代码] [代码][代码]complete: () => {[代码][代码] console.log([代码][代码]'captureScreen complete'[代码][代码]);[代码][代码] [代码][代码]}[代码][代码] [代码][代码]});[代码][代码] [代码][代码]}[代码] 我想实现的是,用户在点击按钮的时候,触发屏幕截图功能,同时把图片保存到手机相册里。 以上代码在编辑器里运行正常,在真机上返回 wxfile://tmp_xxxxxx.unknown 文件。 [图片] 求解决。
2017-07-14 - swiper实现纵向轮播
如标题所示,swiper如何实现纵向轮播功能?官方目前没有提供此功能,希望能尽早提供。
2017-07-11 - wx.request在真机iPhone上请求api返回的是html代码
[代码]onLoad: [代码][代码]function[代码] [代码](options) {[代码] [代码] [代码][代码]wx.showLoading({[代码][代码] [代码][代码]title: [代码][代码]'加载中...'[代码][代码],[代码][代码] [代码][代码]});[代码][代码] [代码][代码]// 请求数据[代码][代码] [代码][代码]wx.request({[代码][代码] [代码][代码]url: [代码][代码]'https://api.yuexing.com/?mod=recommend&act=get_recommend_list&platform=wechatapp&conditions=appindex_bottom_goods6;appindex_goods6;appindex_c_goods6;appindex_d_goods6'[代码][代码],[代码][代码] [代码][代码]success: (result) => {[代码][代码] [代码][代码]console.log([代码][代码]'返回的数据'[代码][代码], result);[代码][代码] [代码][代码]},[代码][代码] [代码][代码]fail: (err) => wx.showToast({ title: [代码][代码]'请求超时!'[代码][代码]}),[代码][代码] [代码][代码]complete: () => wx.hideLoading()[代码][代码] [代码][代码]});[代码][代码]},[代码] 如上所示代码,在开发工具里,在android真机上都能正常获取接口里的数据,但是当在真机iPhone上时,获取到的却是html代码。 这个问题困扰我一两天了,求解答。 [图片]
2017-07-05