文章图片
文章图片
效果自认很美，js逻辑不难，主要是各种状态的控制，重点在于页面代码。
下面是身份证正面的代码，反面代码类似。
wxml代码：
外层用relative，内层用absolute，从而实现图片在框里面。
wxss代码：
.row{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 40rpx;
}
.delete{
flex: 1;
text-align: center;
}
.show{
visibility: visible;
}
.hidden{
visibility: hidden;
}
.icon{
width: 35rpx;
height: 35rpx;
}
.zhong{
flex: 5;
position: relative;
}
.im1{
position: absolute;
width: 96%;
margin-left: 2%;
}
.im2{
width: 84%;
height: 266rpx;
margin-left: 8%;
margin-top: 4%;
}
.add{
flex: 1;
text-align: center;
}js代码：
data: {
zhengimg: "../../imgs/zheng.png",
zhengShow: false
},
deleteZhengTap() {
this.setData({
zhengimg: "../../imgs/zheng.png",
zhengShow: false
})
},
zhengTap() {
if ("../../imgs/zheng.png" == this.data.zhengimg) {
this.chooseImgZheng();
}
},
addZhengTap() {
this.chooseImgZheng();
},
chooseImgZheng() {
let that = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths[0];
that.setData({
zhengimg: tempFilePaths,
zhengShow: true
})
}
})
}【小程序身份证上传】
推荐阅读
- 小程序|【视频倒放神器】超级玩法（千万不要倒放视频，太魔性了根本停不下来......）
- 小程序|最难忘的新年祝福，第一个让大家都惊喜的小程序（有趣、恶搞、好玩）
- 小程序|【自制壁纸生成器】2022新年壁纸领取，换一张手机壁纸，迎接2022叭~
- 白皮书|阿拉丁指数丨《2021 年度小程序互联网发展白皮书》4.5 亿+DAU 小程序的 6 大发展趋势
- 学习笔记|uni-app开发小程序
- 微信小程序的广告方式有哪些
- 公众号关联微信小程序功能介绍
- 微信小程序|微信小程序从入门到入土教程(02)
- 小程序|小程序性能优化的一些实践