微信小程序選擇圖片控件
更新時(shí)間:2021年01月19日 09:08:58 作者:小雅雅家的小凱凱吖
這篇文章主要為大家詳細(xì)介紹了微信小程序選擇圖片控件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序選擇圖片控件的具體代碼,供大家參考,具體內(nèi)容如下

xml:
<loading hidden="{{loadingHidden}}">
加載中...
</loading>
<view class="add_carimg">
<block>
<view class="load_iamge">
<text class="load_head_text">上傳施工車(chē)輛照片</text>
<text class="load_foot_text">{{imgbox.length}}/2</text>
</view>
<view class='pages'>
<view class="images_box">
<block wx:key="imgbox" wx:for="{{imgbox}}">
<view class='img-box'>
<image class='img' src='{{item}}' data-message="{{item}}" bindtap="imgYu"></image>
<view class='img-delect' data-deindex='{{index}}' bindtap='imgDelete1'>
<image class='img' src='/pages/images/delete_btn.png'></image>
</view>
</view>
</block>
<view class='img-box' bindtap='addPic1' wx:if="{{imgbox.length<2}}">
<image class='img' src='/pages/images/load_image.png'></image>
</view>
</view>
</view>
</block>
</view>
<view>
<button class="work_btn" bindtap="shanggang">上崗</button>
</view>
css:
.work_btn {
width: 60%;
height: 35px;
line-height: 35px;
margin-top: 15px;
border-radius: 5px;
font-size: 30rpx;
color: white;
background-color: rgb(2, 218, 247);
}
.work_btn:active {
width: 60%;
height: 35px;
line-height: 35px;
margin-top: 15px;
border-radius: 5px;
font-size: 30rpx;
color: white;
background-color: rgb(151, 222, 231);
}
/*********/
.load_iamge {
width: 100%;
height: 30px;
margin-top: 10px;
display: flex;
flex-direction: row;
}
.load_head_text {
width: 95%;
height: 20px;
margin-bottom: 5px;
margin-top: 5px;
}
.load_foot_text {
width: 5%;
height: 20px;
margin-right: 15px;
margin-top: 5px;
margin-bottom: 5px;
float: right;
}
.pages {
width: 98%;
margin: auto;
overflow: hidden;
}
/* 圖片 */
.images_box {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
background-color: white;
}
.img-box {
border: 2rpx;
border-style: solid;
border-color: rgba(170, 167, 167, 0.452);
width: 200rpx;
height: 200rpx;
margin-left: 35rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
position: relative;
}
/* 刪除圖片 */
.img-delect {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
position: absolute;
right: -20rpx;
top: -20rpx;
}
.img {
width: 100%;
height: 100%;
}
js:
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
tempFilePaths: '',
imgbox: [], //選擇圖片
fileIDs: [], //上傳云存儲(chǔ)后的返回值
src: 0,
},
onLoad: function (options) {
},
//圖片點(diǎn)擊事件
imgYu: function (event) {
var that = this;
console.log(event.target.dataset.message + "這是啥");
var src = event.target.dataset.message;
//圖片預(yù)覽
wx.previewImage({
current: src, // 當(dāng)前顯示圖片的http鏈接
urls: [src] // 需要預(yù)覽的圖片http鏈接列表
})
}, // 刪除照片 &&
imgDelete1: function (e) {
let that = this;
let index = e.currentTarget.dataset.deindex;
let imgbox = this.data.imgbox;
imgbox.splice(index, 1)
that.setData({
imgbox: imgbox
});
},
// 刪除照片 &&
imgDelete1: function (e) {
let that = this;
let index = e.currentTarget.dataset.deindex;
let imgbox = this.data.imgbox;
imgbox.splice(index, 1)
that.setData({
imgbox: imgbox
});
},
// 選擇圖片 &&&
addPic1: function (e) {
var imgbox = this.data.imgbox;
console.log(imgbox)
var that = this;
var n = 2;
if (2 > imgbox.length > 0) {
n = 2 - imgbox.length;
} else if (imgbox.length == 2) {
n = 1;
}
wx.chooseImage({
count: n, // 默認(rèn)9,設(shè)置圖片張數(shù)
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī),默認(rèn)二者都有
success: function (res) {
// console.log(res.tempFilePaths)
// 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths
console.log('路徑' + tempFilePaths);
if (imgbox.length == 0) {
imgbox = tempFilePaths
} else if (2 > imgbox.length) {
imgbox = imgbox.concat(tempFilePaths);
}
that.setData({
imgbox: imgbox,
imgnum: imgbox.length
});
}
})
},
//圖片
imgbox: function (e) {
this.setData({
imgbox: e.detail.value
})
},
})
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript簡(jiǎn)單實(shí)現(xiàn)彈出拖拽窗口(一)
這篇文章主要為大家詳細(xì)介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)彈出拖拽窗口的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06
JavaScript 拖拽實(shí)現(xiàn)(附注釋?zhuān)?,最?jīng)典簡(jiǎn)單短小精悍!
JavaScript拖拽實(shí)現(xiàn)(附注釋?zhuān)罱?jīng)典!最簡(jiǎn)單!短小精悍!2009-04-04
JS實(shí)現(xiàn)頁(yè)面載入時(shí)隨機(jī)顯示圖片效果
這篇文章主要介紹了JS實(shí)現(xiàn)頁(yè)面載入時(shí)隨機(jī)顯示圖片效果,涉及javascript基于隨機(jī)數(shù)與數(shù)組的頁(yè)面元素動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
Wordpress ThickBox 添加“查看原圖”效果代碼
上一次修改了點(diǎn)擊圖片動(dòng)作 , 這次添加一個(gè)“查看原圖”的鏈接,點(diǎn)擊后將在一個(gè)新瀏覽器窗口(或Tab)打開(kāi)該圖片的原始鏈接地址。2010-12-12

