【小程序】实现发动态功能
最近做了一个校园拍卖小程序,想在里面添加一个类似校园圈功能,现在来一步一步实现。
一、设计所需要的表
1、文章表
文章表很简单,就类似朋友圈,一个文字内容,一个图片数组
二、发布动态
1、文本区
光标有点问题,回车换行时光标和文字被埋在下面了
解决,给textarea设置一个最大高度,max-length,把scroll-view改为view ,因为textarea本身自带滚动
2、最终发表动态效果
3、发布动态代码
1、publisherArticle.wxml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < view class="main"> <!--文字区--> < view class="text" > < textarea fixed="true" auto-height placeholder="这一刻的想法..." bindinput="setText" style="margin: 10rpx;width: 96%;max-height: 90%;"/> </ view > <!--图片区--> < view class="img"> < block wx:for="{{selectImgs}}" wx:key="index"> < image src="{{item}}" style="height: 220rpx;width: 220rpx;margin: 10rpx;"></ image > </ block > < image wx:if="{{selectImgs.length != 9}}" src="/image/addImg.png" bindtap="selectImg" style="height: 80rpx;width: 80rpx;padding: 70rpx;background-color: rgb(241, 236, 236);margin-top: 10rpx;"></ image > </ view > < view class="publish" bindtap="publish">发表</ view > </ view > |
2、publisherArticle.wxss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | .main{ position : fixed ; top : 10 rpx; bottom : 10 rpx; left : 0 rpx; right : 0 rpx; z-index : 0 ; } .text{ position : fixed ; top : 20 rpx; left : 10 rpx; right : 10 rpx; height : 23% ; background-color : white ; border-radius: 10 rpx; z-index : 1 ; } .img{ position : fixed ; display : flex; flex-wrap: wrap; top : 23% ; left : 10 rpx; right : 10 rpx; bottom : 15% ; background-color : white ; border-radius: 10 rpx; z-index : 1 ; } .publish{ position : fixed ; z-index : 1 ; top : 88% ; width : 11% ; left : 40% ; background-color : rgb ( 8 , 88 , 32 ); color : white ; font-size : 40 rpx; border-radius: 30px ; padding : 10 rpx 30 rpx; box-shadow: 2px 2px 10px rgb ( 16 , 46 , 33 ); } |
3、publishArticle.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | Page({ data: { selectImgs: null , text: '' , uploadImgs: [] }, selectImg(){ wx.chooseImage({ count: 8, success: (res) => { this .setData({ selectImgs: res.tempFilePaths }) } }) }, setText(e){ let text = e.detail.value console.log(text) this .setData({ text: text }) }, //发表动态 publish(){ this .uploadImages().then((resolve, reject) => { wx.showLoading({ title: '发布中' }) setTimeout(() => {}, 500) let imagesUrl = this .data.uploadImgs //云存储的图片列表 let text = this .data.text wx.cloud.database().collection( 'article' ).add({ data: { content: text, imagesUrl: imagesUrl }, success: (res) => { wx.hideLoading({ success: (res) => { wx.showToast({ title: '发表成功' , }) wx.navigateBack({ delta: 1, }) }, }) } }) }) }, //上传图片到云存储 uploadImages() { let _this = this return new Promise( function (resolve, reject) { function upload(index) { var picnum = index+1 wx.showLoading({ title: '上传第' + picnum + '张图片' }) wx.cloud.uploadFile({ cloudPath: 'articleImgs/' + new Date().getTime() + '_' + Math.floor(Math.random() * 1000) + '.jpg' , //给图片命名 filePath: _this.data.selectImgs[index], //本地图片路径 success: (res) => { _this.data.uploadImgs[index] = res.fileID wx.hideLoading({ success: (res) => {}, }) //判断是否全部上传 if (_this.data.selectImgs.length - 1 <= index) { console.log( '已全部上传' ) resolve( 'success' ) return } else { console.log(index) upload(index + 1) } }, fail: (err) => { reject( 'error' ) wx.showToast({ title: '上传失败,请重新上传' , type: 'none' }) } }) } upload(0) }) }, } |
本文来自博客园,作者:小李不背锅,转载请注明原文链接:https://www.cnblogs.com/lishilin-glut/p/16550127.html
分类:
桂工微拍小程序
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了