简单实现QQ发说说选择图片并显示效果

实现效果：

代码实现：（复制可用）

index.wxml：

<view class="top"><view>取消</view><view>写说说</view><view class="publish_btn" bindtap="publishTap">发表</view>
</view><textarea name="text" id="" value="{{content}}" cols="30" rows="10" placeholder="分享新鲜事..." maxlength="-1" auto-focus="true" focus="true"></textarea><view class="weui-uploader"><view class="img-v weui-uploader__bd"><view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"><image class='weui-uploader__img 'src="{{item}}"data-index="{{index}}" mode="aspectFill" bindtap="previewImg"><icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg" color="#5dcdff"></icon></image></view><!-- 用来提示用户上传图片 --><view class="weui-uploader__input-box pic" bindtap="chooseImg"> </view></view>
</view><view class="photo" bindtap="chooseImg"><image class="photo-icon" src="../../images/photo.png"></image><text class="wenzi">照片</text>
</view>

index.wxss：

.top {height: 100rpx;display: flex;align-items: center;justify-content:space-between;padding:0 30rpx ;box-sizing: border-box;background-color: #16a0f8;color: #ffffff;
}
.top .publish_btn {height: 65rpx;width: 120rpx;border-radius: 32rpx;background-color: #6cd3ff;text-align: center;line-height: 65rpx;cursor: pointer;
}textarea{margin: auto;width:94%;height: 200rpx;padding: 10px;margin-bottom: 30rpx;
}
.photo {height: 210rpx;width: 210rpx;margin-left:15px;border: 5rpx dashed #bfbfbf;border-radius: 20rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;
}
.photo-icon {width: 80rpx;height: 70rpx;
}
.wenzi {color: #bfbfbf;margin-top: 10rpx;
}.weui-uploader__img {width: 225rpx;height: 225rpx;
}.img{display: inline-block;
}.pic {float:left;position:relative;margin-left:8px;margin-bottom:9px;
}
.delete-btn{position: absolute;top: 0;right: 0;
}
.weui-uploader{padding: 10rpx;
}

index.js：

Page({/*** 页面的初始数据*/data: {imgs: [],},// 上传图片chooseImg: function (e) {var that = this;var imgs = this.data.imgs;if (imgs.length >= 9) {this.setData({lenMore: 1});setTimeout(function () {that.setData({lenMore: 0});}, 2500);return false;}wx.chooseImage({// count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths;var imgs = that.data.imgs;// console.log(tempFilePaths + '----');for (var i = 0; i < tempFilePaths.length; i++) {if (imgs.length >= 9) {that.setData({imgs: imgs});return false;} else {imgs.push(tempFilePaths[i]);}}// console.log(imgs);that.setData({imgs: imgs});}});},// 删除图片deleteImg: function (e) {var imgs = this.data.imgs;var index = e.currentTarget.dataset.index;imgs.splice(index, 1);this.setData({imgs: imgs});},// 预览图片previewImg: function (e) {//获取当前图片的下标var index = e.currentTarget.dataset.index;//所有图片var imgs = this.data.imgs;wx.previewImage({//当前显示图片current: imgs[index],//所有图片urls: imgs})},// 点击发布publishTap() {wx.showToast({title:'发表成功',icon:'success',duration:2000 //持续的时间})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

app.json：

【微信小程序】简单实现QQ发说说选择图片并显示功能相关推荐

微信小程序chooseImage（从本地相册选择图片或使用相机拍照）
一.使用API wx.chooseImage(OBJECT) var util = require('../../utils/util.js') Page({data:{src:"../im ...
小程序微信统计表格_微信小程序简单的数据表格及查询功能
简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具前端:界面布局样式和js的跳转后端:依靠SpringBoot的业务逻辑层项目的码云地址: 微信开发工具的使用和 ...
微信小程序简单好看的表格器
微信小程序简单好看的表格 1.数据和样式 2.带纵向滑动条的列表纯色简单表格 3.带纵向滑动条的列表间隔色简单表格微信小程序目前没有 table 标签,需要用到表格,必须自己处理.想要一个简单的比较 ...
第十五周——微信小程序简单的界面
第十五周--微信小程序简单的界面前言一.Pages 二.TabBar 总结前言本篇文章是向大家分享一下怎样简单制作一个微信小程序的界面一.Pages 这里要写的是小程序里面你所创建界面的路径 ...
微信小程序简单的信息表格的提交到数据库(新手篇)(云端数据库)
微信小程序简单的信息表格的提交到数据库(新手专属)(云端数据库) 大家好,我是小陈,一名大一的编码爱好者,,,,,刚刚结束了大一的学习生活,也总结出了一点编码的经验,希望与大家一起分享.我是学习物联网 ...
微信小程序--简单页面跳转
微信小程序--简单页面跳转例如:点击一个text ,跳转入一个新的页面blueberry.wxml 首先对text 设置监听事件 <view bindtap="toast" ...
【微信小程序系列】微信小程序简单的实现发送订阅信息
[微信小程序系列]微信小程序简单的实现发送订阅信息项目结构两个云函数一个页面获取模板注:详细内容中的参数很重要,一会要在云函数里用代码 app.js // app.js App({onLau ...
微信小程序简单日历组件
微信小程序简单的日历组件代码:  <view class='cld'><view class="cld-top">< ...
小程序源码：喝酒娱乐小游戏助力神器微信小程序源码下载多种游戏选择玩法多种
大家好今天给大家带来另外一款喝酒小神器好像记得小编之前也发过好几款这种小程序源码吧但是每一款的UI或者功能什么的都还是会有所不一样的大家也可以找找之前所发的那几款对比一下然后决定自己需要哪一款哟 ...

【微信小程序】简单实现QQ发说说选择图片并显示功能

简单实现QQ发说说选择图片并显示效果

实现效果：

代码实现：（复制可用）

【微信小程序】简单实现QQ发说说选择图片并显示功能相关推荐

最新文章

热门文章