京东购物网站怎么做,福建公司网站建设,vs网站怎么做,柳州团购网站建设基于Vant UI的微信小程序开发✨ #xff08;一#xff09;悬浮浮动1、效果图#xff1a;只要无脑引用样式就可以了2、页面代码3、js代码4、样式代码 #xff08;二#xff09;底部跳转1、效果图#xff1a;点击我要发布跳转到发布的页面2、js代码3、页面代码4、app.json代… 基于Vant UI的微信小程序开发✨ 一悬浮浮动1、效果图只要无脑引用样式就可以了2、页面代码3、js代码4、样式代码 二底部跳转1、效果图点击我要发布跳转到发布的页面2、js代码3、页面代码4、app.json代码配置底部导航tabBar 三上传组件实现图片/文件上传预览、上传数量限制、大小限制、删除、点击之后列表查看1、效果图2、js代码借助的是微信小程序开发工具的缓存路径的代码返回的微信小程序图片路径进行预览下面第三个才是回调自己的上传接口进行预览操作我会再写一篇关于阿里云对象存储的文章帮助大家实现3、上传的重要代码替换了借助的是微信小程序开发工具的缓存路径的代码部分4、页面代码 四图片预览1、使用vant组件van-image1js代码2html代码 2、使用image 食用本篇文章的前提是你引入了Vant-UI自己看如何引入一定要注意是小程序版up已经贴心的附上了链接Vant Weapp轻量、可靠的小程序 UI 组件库
一悬浮浮动
1、效果图只要无脑引用样式就可以了 2、页面代码
view classfloat-icon bind:taptoQiuZhiFaBuvan-icon nameadd color#31df80 info求职发布 size50px /
/view3、js代码 /**跳转到我的发布-求职发布 */toQiuZhiFaBu() {wx.navigateTo({url: /pages/record/QiuZhiFaBu/index,})},4、样式代码
.float-icon {position: fixed;bottom: 10%;right: 10%;z-index: 99;border-radius: 50rpx;background-color: white;display: flex;justify-content: center;
}二底部跳转
1、效果图点击我要发布跳转到发布的页面 2、js代码
toWoyaofabu() {wx.switchTab({url: /pages/record/index,})},3、页面代码
view stylewidth: 23%;height: 200rpx;text-align: center; bind:taptoWoyaofabuview stylewidth: 100rpx;height: 100rpx;margin: 10rpx auto;background-image: url(https://zhihuifile.oss-cn-qingdao.aliyuncs.com/chacheyoufu/assets/carousel/%E6%88%91%E8%A6%81%E5%8F%91%E5%B8%83%E7%BB%BF%E7%89%88.png);background-size: 100% 100%;border-radius: 20rpx; /viewtext stylefont-size: 13px;我要发布/text
/view4、app.json代码配置底部导航tabBar
tabBar: {color: #000,selectedColor: #31df80,borderStyle: black,backgroundColor: #ffffff,list: [{pagePath: pages/index/index,text: 首页,iconPath: /assets/tabBar/index1.png,selectedIconPath: /assets/tabBar/index1-select.png,iconSize: 10},{pagePath: pages/exam/index/index,text: 商城,iconPath: /assets/tabBar/shopping.png,selectedIconPath: /assets/tabBar/shopping-select.png},{pagePath: pages/record/index,text: 发布,iconPath: /assets/tabBar/publish.png,selectedIconPath: /assets/tabBar/publish-select.png},{pagePath: pages/shoppingCart/index,text: 购物车,iconPath: /assets/tabBar/shoppingcart.png,selectedIconPath: /assets/tabBar/shoppingcart-select.png},{pagePath: pages/my/index/index,text: 个人中心,iconPath: /assets/tabBar/my1.png,selectedIconPath: /assets/tabBar/my1-select.png}]},三上传组件实现图片/文件上传预览、上传数量限制、大小限制、删除、点击之后列表查看
1、效果图
上传数量限制点击预览删除大小限制
2、js代码借助的是微信小程序开发工具的缓存路径的代码返回的微信小程序图片路径进行预览下面第三个才是回调自己的上传接口进行预览操作我会再写一篇关于阿里云对象存储的文章帮助大家实现
/**上传文件 */afterRead(event) {let that this;const {file} event.detail;console.log(file, file);// 此处借助的是微信小程序开发工具的缓存路径wx.getFileSystemManager().saveFile({tempFilePath: file.url, // 临时文件路径success(res) {// 保存文件成功后将文件的本地路径添加到 imageCoverPath 数组中const savedFilePath res.savedFilePath;const newImage {url: savedFilePath,isImage: true,}const imageCoverPath that.data.imageCoverPath;imageCoverPath.push(newImage);that.setData({imageCoverPath: imageCoverPath});console.log();},fail(err) {// 保存文件失败的处理console.log(保存文件失败, err);}});},/**删除文件 */deleteFile(event) {const {index} event.detail; // 获取要删除的文件索引const imageCoverPath this.data.imageCoverPath;imageCoverPath.splice(index, 1); // 从数组中移除指定索引的文件this.setData({imageCoverPath: imageCoverPath // 更新数据});},/**预览图片 */previewImage(event) {// 获取点击的图片索引const {index} event.detail;// 获取当前图片的预览路径const current this.data.imageCoverPath[index];// 预览图片console.log(预览图片, current, event.detail.index, this.data.imageCoverPath);wx.previewImage({current: current, // 当前显示图片的链接urls: this.data.imageCoverPath // 所有图片的链接数组});},/**方法通用 *//**上传前校验 */beforeRead(event) {const {file,callback} event.detail;callback(file.type image);if (file.type ! image) {wx.showToast({title: 请上传图片,})}},/**文件尺寸过大 */overSizeI() {wx.showToast({title: 尺寸过大,icon: error})},3、上传的重要代码替换了借助的是微信小程序开发工具的缓存路径的代码部分
afterRead(event) {let that this;const {file} event.detail;const token wx.getStorageSync(token);console.log(file, file,token,token);// 设置请求头部信息const header {token: token,};// 上传图片wx.uploadFile({url: app.globalData.baseAPI/api/wx/student/file/upload, // 服务器地址filePath: file.tempFilePath, // 图片的路径name: file, // 文件对应的 key开发者在服务器端通过这个 key 可以获取到文件formData: { // HTTP 请求中其他额外的 form datauser: test},header: header,success: function (res) {// 服务器成功响应处理if (res.statusCode 200) {var data res.data; // 服务器返回的数据console.log(data);// 在这里处理服务器返回的数据例如解析JSONvar jsonData JSON.parse(data);if (jsonData.code 1) {// 保存文件成功后将文件的本地路径添加到 imageCoverPath 数组中const savedFilePath jsonData.response;const newImage {url: savedFilePath,isImage: true,}const imageCoverPath that.data.certificate;imageCoverPath.push(newImage);that.setData({certificate: imageCoverPath});} else {wx.showToast({title: 发布失败,icon: error,})}}},fail: function (error) {// 请求失败处理wx.showToast({title: 上传失败,icon: none,})console.error(uploadFile fail, error);}});},4、页面代码
view stylemargin-top: 20px;background-color: white;van-field label车辆图片(正、后、左、右方)/描述 required title-width500rpx readonly/van-fieldview stylemargin-left: 2%;margin-right: 2%;van-uploader file-list{{ imageCoverPath }} acceptimage max-count4use-before-readtrue deletable{{ true }} preview-size120px upload-text上传4M以内的图片 bind:deletedeleteFile bind:before-readbeforeRead preview-imagetrue bind:after-readafterRead bind:click-previewpreviewImage bind:oversizeoverSizeI capturecamera max-size4194304 //view/view四图片预览
1、使用vant组件van-image
1js代码 /**点击图片显示预览 */previewImage(e) {console.log(e,e.currentTarget);const currentSrc e.currentTarget.dataset.src;const urls this.data.releaseSheBeiRentalInfo.imageCoverPath; // releaseDetailsInfo.certificate是一个包含所有图片URL的数组wx.previewImage({current: currentSrc, // 当前显示图片的链接urls: urls // 需要预览的图片链接列表});},2html代码
view stylebackground-color: white;view stylefont-weight: bold;margin: 0 0 20rpx 30rpx;padding-top: 30rpx;前后左右照片/viewview wx:for{{releaseSheBeiRentalInfo.imageCoverPath}} wx:keyindex styledisplay: flex;flex-direction: column;line-height: 1.5;align-items: center;justify-content: center;padding: 20rpx;van-image wx:if{{item}} width620rpx height400rpx fitfill src{{item}} data-src{{item}} lazy-load bind:clickpreviewImage //view!-- view wx:if{{releaseSheBeiRentalInfo.imageCoverPath0}} wx:keyindex styledisplay: flex;flex-direction: column;line-height: 1.5;align-items: center;justify-content: center;padding: 20rpx;view width620rpx height400rpxtext stylecolor:#ccc;未上传照片/text/view/view --/view2、使用image image stylewidth: 100%; height: 200rpx; bind:tappreviewImage data-src{{item}} fitfill src{{item}} /
