uniapp、Vue同时监听多个数据
uniapp、Vue同时监听多个数据
使用场景 具体实现 computed:{ many(){ const { msv, tdv, dfv, jgv, zhv } = this return { msv, tdv, dfv, jgv, zhv } }, }, watch: { many(newValue, oldValue) { if(newValue.msv&&newValue.tdv&&newValue.dfv&&newValue.jgv&&newValue.zhv){ this.stat = '已评价' } }, }, 说明 msv, tdv, dfv, jgv, zhv等数据为表单数据,默认为空 通过监听计算这些值的变化,若全部不为空则显示已评价
 2022-12-20
经常用到的小程序左右卡片
经常用到的小程序左右卡片
介绍 经常可以在很多小程序内看到左右两个小卡片,我自己也经常写到,记录一下,后面用到直接复制粘贴即可 演示 代码 <view class="two-box"> <view class="one"> <view class="content-left"> <view class="hdjh"> 活动计划 </view> <view class="hdjh-btn"> 点击进入 </view> </view> <view class="content-right"> <tui-icon name="member-fill" color="rgb(77, 137, 134)" size="35"></tui-icon> </view> </view> <view class="two"> <view class="content-left"> <view class="gzzd"> 活动计划 </view> <view class="gzzd-btn"> 点击进入 </view> </view> <view class="content-right"> <tui-icon name="order" color="rgb(65, 154, 253)" size="35"></tui-icon> </view> </view> </view> 注意上面有用到tui的图标,直接换成图片或别的图标即可,网页使用可直接将view替换成div .two-box{ width: 96%; display: flex; justify-content: space-between; margin: 10px 2%; } .one{ background-color: rgb(234, 248, 245); width: 40%; border-radius: 5px; display: flex; justify-content: space-around; padding: 15px; } .content-left .hdjh{ font-weight: 700; color: rgb(77, 137, 134); } .content-left .hdjh-btn{ font-size: 11px; display: initial; color: #fff; font-weight: 500; border-radius: 10px; padding: 1px 3px; background-color: rgb(77, 137, 134); } .two{ background-color: rgb(236, 242, 255); width: 40%; border-radius: 5px; display: flex; justify-content: space-around; padding: 15px; } .content-left .gzzd{ font-weight: 700; color: rgb(65, 154, 253); } .content-left .gzzd-btn{ font-size: 11px; display: initial; color: #fff; font-weight: 500; border-radius: 10px; padding: 1px 3px; background-color: rgb(65, 154, 253); }
 2022-12-2
Emlog实现App+小程序(Brief免费版)
Emlog实现App+小程序(Brief免费版)
程序简介 Emlog小程序,Brief免费版,适配App+QQ小程序+微信小程序 目前仅适用于EmlogPro 1.4+ 安装教程 注意:一定要先在博客后台开启API(系统-设置-API接口-开启API) 导入项目到HBuilderX 修改setting.js内的配置信息 发行到您需要的平台 HBuilderX插件 除上图外还需安装内置终端(可选择) 详细安装教程 详细视频教程:https://v.douyin.com/2gjKjQF/ app发行视频教程:https://v.douyin.com/2gRAEJ8/ 源码地址 https://github.com/pengsirs/Brief-Dev https://gitee.com/pengsirs/Brief-Dev 一键安装命令: git clone https://github.com/pengsirs/Brief-Dev 其他问题 QQ:6283354(实在不会可以联系我,有偿) 交流群:138778739
 2022-7-28
uni-app请求封装
uni-app请求封装
案例简介 基于promise封装请求,使用async await语法糖,参考插件市场,插件ID:niudandan-promise 详细使用 api.js const BASE_URL = '你的域名'; export const myRequest = (options)=>{ let token = uni.getStorageSync('token') return new Promise((resolve,reject)=>{ uni.request({ url: BASE_URL + options.url, // 将接口地址分为两部分,这样如果域名改变了好维护,接口地址从options中获取 header: { token: token, } || {}, method: options.method || 'GET',//默认Get data: options.data || {},// data从options中获取,如果没有传入data, 则默认一个空对象 success: (res) => { if (res.data.code === 1401) { } else { res } resolve(res); }, fail: (err) => { uni.showToast({ title: '请求接口失败', }); reject(err); }, }); }) } main.js //这个方法可能每个页面都会用到,我们可以在main.js中引入, import {myRequest} from 'api.js' //接收之后,挂载到全局,这样所有的页面都可以调用这个方法 Vue.prototype.$myRequest = myRequest; 使用方法:使用this.$myRequest进行调用 <button type="submit" @click="test()">发送请求</button> methods: { async test() { const res = await this.$myRequest({ url: '/api.php' }) this.dataa = res.data } }
 2022-5-11
     跳转到第 页,共 1 页

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录