WEUI在微信小程序中的使用 |
项目框架的制作 |
栏目首页 |
weui基础组件 |
weui表单 |
weui 操作反馈相关 |
weui 导航 navbar 切换(类tab)使用教程 |
weui 搜索searchbar使用教程 |
当前阅读教程:小程序Weui在线教程 > weui表单 uploader上传组件使用教程 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: weui表单 slider滑块使用教程 | 下一篇: weui 操作反馈相关 |
js代码 // pages/02biaodan/05-uploader.js Page({ /** * 页面的初始数据 */ data: { files: [] }, chooseImage: function (e) { var that = this; wx.chooseImage({ sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 that.setData({ files: that.data.files.concat(res.tempFilePaths) }); } }) }, previewImage: function (e) { wx.previewImage({ current: e.currentTarget.id, // 当前显示图片的http链接 urls: this.data.files // 需要预览的图片http链接列表 }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) wxml代码 <view class="page"> <view class="page__hd"> <view class="page__title">Uploader</view> <view class="page__desc">上传组件</view> </view> <view class="page__bd"> <view class="weui-cells"> <view class="weui-cell"> <view class="weui-cell__bd"> <view class="weui-uploader"> <view class="weui-uploader__hd"> <view class="weui-uploader__title">图片上传</view> <view class="weui-uploader__info">{{files.length}}/2</view> </view> <view class="weui-uploader__bd"> <view class="weui-uploader__files" id="uploaderFiles"> <block wx:for="{{files}}" wx:key="*this"> <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}"> <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" /> </view> </block> <view class="weui-uploader__file"> <image class="weui-uploader__img" src="/images/pic_160.png" mode="aspectFill" /> </view> <view class="weui-uploader__file"> <image class="weui-uploader__img" src="/images/pic_160.png" mode="aspectFill" /> </view> <view class="weui-uploader__file"> <image class="weui-uploader__img" src="/images/pic_160.png" mode="aspectFill" /> </view> <view class="weui-uploader__file weui-uploader__file_status"> <image class="weui-uploader__img" src="/images/pic_160.png" mode="aspectFill" /> <view class="weui-uploader__file-content"> <icon type="warn" size="23" color="#F43530"></icon> </view> </view> <view class="weui-uploader__file weui-uploader__file_status"> <image class="weui-uploader__img" src="/images/pic_160.png" mode="aspectFill" /> <view class="weui-uploader__file-content">50%</view> </view> </view> <view class="weui-uploader__input-box"> <view class="weui-uploader__input" bindtap="chooseImage"></view> </view> </view> </view> </view> </view> </view> </view> </view> |
|
上一篇: weui表单 slider滑块使用教程 | 下一篇: weui 操作反馈相关 |