发布于:2020-05-15 09:58:00
一:textarea组件层级过高导致文字穿透浮层问题。
项目需求:最近做的一个小程序需求,其中一个页面使用到了 textarea
这个小程序组件,然后点击页面上的某个元素,会触发页面弹起一个弹窗,这时发现 textarea
的 placeholder
文字或者输入的文字内容,会直接穿透遮罩层和浮动弹窗,显示在最上面。第一反应以为是层叠级问题。所以疯狂给弹框的 z-index 属性往上加。但无济于事。于是改变思路:
利用 wx:if 当显示弹框的时候,把 textarea 隐藏;弹框关闭的时候,显示textarea。(这个方法比较暴力直接,治标不治本,若有更好的解决方案可以告知)。
二:上传多张图片
项目需求:用户最多可以上传6张图片,如果上传错误可以单张删除,上传成功可以预览照片。效果图如下:
![](https://img2018.cnblogs.com/blog/1317140/201908/1317140-20190829142932206-1401892077.png)
首先在微信公众平台配置好uploadFile合法域名。
界面的WXML代码大致如下所示:
![复制代码](https://common.cnblogs.com/images/copycode.gif)
<view class="upload-view">
<view class='upload'>
<!-- 根据已选择的图片临时路径数组展示图片-->
<view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="{{index}}">
<!-- 删除-->
<icon class='ui_uploader_item_icon' bindtap='clearImg' data-index="{{index}}" type="clear" size="20" color="red"/>
<!-- 图片-->
<image class="special-image" bindtap='showImg' data-index="{{index}}" src='{{item}}'></image>
</view>
<!-- 上传按钮+框 -->
<view class="image" wx:if="{{showUpload}}">
<image bindtap='upload' src="/images/timg.png" ></image>
</view>
</view>
</view>
![复制代码](https://common.cnblogs.com/images/copycode.gif)
与此对应的js代码如下:
![复制代码](https://common.cnblogs.com/images/copycode.gif)
'',
joinString:''
uploaderNum: 0,
showUpload: ,
upload: that = 6 - that.data.uploaderNum,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: uploaderList = (uploaderList.length == 6 ( i = 0; i < uploaderList.length; i++'xxxxx''files' id =++ `${id},`).slice(0, -1
![复制代码](https://common.cnblogs.com/images/copycode.gif)
删除图片、展示图片逻辑如下:
![复制代码](https://common.cnblogs.com/images/copycode.gif)
//展示图片
showImg: function (e) { var that = this;
wx.previewImage({
urls: that.data.uploaderList,
current: that.data.uploaderList[e.currentTarget.dataset.index]
})
}, // 删除图片
clearImg: function (e) { var that = this
var nowList = [];//新数据
var uploaderList = that.data.uploaderList;//原数据
for (let i = 0; i < uploaderList.length; i++) { if (i == e.currentTarget.dataset.index) { var arr = that.data.joinString.split(',')
arr.splice(i, 1); //删除图片的同时删除掉其对应的ID
var newArr = arr.join(',')
that.setData({
joinString:newArr,
id:newArr+','
})
} else {
nowList.push(uploaderList[i])
}
} this.setData({
uploaderNum: this.data.uploaderNum - 1,
uploaderList: nowList,
showUpload: true,
})
},
![复制代码](https://common.cnblogs.com/images/copycode.gif)
之后就是随着表单信息把图片ID一块提交了,注意:在提交完成之后记得将data中的uploadList、uploadNum、Id、joinString清空哦!否则再次提交表单的时候会出现上传图片的bug哦!
https://www.cnblogs.com/YMoonwind/p/11353743.html
阅读 145+
10