- 自定义tabbar中间凸起部分的圆弧怎么做出来?
[图片][图片] 自定义的tabbar,中间凸起部分的圆弧怎么做出来?如图二是想要实现的效果,图一中红色框的圆弧要怎么实现? wxml代码 <view class="tab-bar"> <view class="tab-bar-border"></view> <view class="tab-bar-item" wx:for="{{selectList}}" wx:key="index" data-index="{{index}}" data-path="{{item.pagePath}}" data-selected="{{item.selected}}" bindtap="onwidthTap"> <image class="cover-image" src="{{selected === item.selected ? item.selectedIconPath : item.iconPath}}"></image> <view class="cover-view" style="color:{{selected === item.selected ? selectedColor : color}}">{{item.text}}</view> </view> </view> <view class="indicator"> <view class="indicator-border"></view> <view class="indicator-item"> <image class="indicator-image" src="/images/jia.png"></image> </view> <view class="indicator-item-text">发布</view> </view> wxss代码 .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 120rpx; background-color: white; display: flex; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 0 5rpx 0 rgba(0, 0, 0, 0.33); } .tab-bar-item { flex: 1; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .cover-image { margin-bottom: 40rpx; width: 44rpx; height: 44rpx; } .tab-bar-item .cover-view { font-size: 34rpx; position: absolute; bottom: 10rpx; color: #7A7E83; } .indicator { height: 70rpx; display: flex; flex-direction: column; align-items: center; } .indicator-border { position: absolute; left: 50%; top: -50rpx; transform: translate(-50%, -50%); border-radius: 50%; width: 80rpx; height: 80rpx; border: 7px solid #fff; box-shadow: 0 0 5rpx 0 rgba(0, 0, 0, 0.33); z-index: -1; } .indicator-item { position: absolute; left: 50%; top: -50rpx; transform: translate(-50%, -50%); background: #ff9f7f; border-radius: 50%; width: 80rpx; height: 80rpx; display: flex; flex-direction: column; justify-content: space-between; align-items: center; border: 7px solid #fff; z-index: 1; } .indicator-image { width: 80rpx; height: 80rpx; border-radius: 50%; } .indicator-item-text { font-size: 34rpx; z-index: 1; color: #7A7E83; position: absolute; bottom: 10rpx; }
04-09 - 跳转到详情页,显示的信息是NAN,过1-2秒后就显示正常,这是什么问题?
当进入详情页的时候,首先显示的如图1,过1-2秒之后就正常展示如图2,这是什么问题?上传了一段代码片段,烦请大师帮忙看下,怎么解决。 [图片][图片]
03-15 - 授权登录时,点击头像或者昵称时报错gloalthis is not defined?
[图片][图片] [图片] 如图1当点击头像或者昵称时,报错如图2,工具是1.05版本的,电脑是w7系统升级不了1.05以上版本,之前node.js装的9.6.0,能够正常使用。现在换了appid之后,云函数需要的node.js12.16版本,如图3,电脑重装了系统之后,安装的node.js是12.16.0版本的。现在点击头像或者昵称时就报错,globalthis is not defined.这个错误要怎么解决?
03-11 - textarea组件没有输入内容一直显示正在发表中?
如图,textarea组件,如果没有输入内容,就一直显示正在发表中...,打印的结果是undefined,这是什么问题? [图片][图片] wxml代码: <form bindsubmit="onReleaseEvent"> <view class="carpool-group"> <view class="carpool-title">备注</view> <textarea class="content" placeholder="请输入您要补充的内容" /> </view> <button class="btn" formType="submit">提交</button> </form> js代码: // 日期转换函数 convertDate(dateStr) { const now = new Date(); const dateArr = dateStr.split('-'); let convertedDate; if (dateArr.length === 3) { // 如果是具体日期格式,如 "2024-11-20" convertedDate = new Date(dateArr[0], dateArr[1] - 1, dateArr[2]); } else { // 如果是今天、明天、后天 const dayOffset = ['今天', '明天', '后天'].indexOf(dateStr); if (dayOffset !== -1) { convertedDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + dayOffset); } } return convertedDate; }, /** * 发布信息 */ onReleaseEvent(event) { const that = this; const carpool = that.data.carpool; const day = that.convertDate(that.data.day); // 转换日期 if (!day) { wx.showToast({ title: "请选择日期", icon: 'none' }); return; } console.log(day) const dateString = `${day.getFullYear()}-${(day.getMonth() + 1).toString().padStart(2, '0')}-${day.getDate().toString().padStart(2, '0')}`; const times = that.data.time; const startPoint = event.detail.value.startPoint; const goal = event.detail.value.goal; const car = event.detail.value.car; const peopleNumber = event.detail.value.peopleNumber; const phone = event.detail.value.phone; const content = event.detail.value.content; console.log('备注的内容',content); const pass = event.detail.value.pass; const weight = event.detail.value.weight; const ton = event.detail.value.ton; const tonsize = event.detail.value.tonsize; // 检查是否所有必填信息都已填写 if (!carpool || !day || !times || !startPoint || !goal || !car || !peopleNumber || !phone) { wx.showToast({ title: "请填写相关信息", icon: 'none' }); return; } wx.showLoading({ title: "正在发表中..." }); wx.cloud.callFunction({ name: "wehicles", data: { carpool: carpool, day: dateString, times: times, startPoint: startPoint, goal: goal, car: car, peopleNumber: peopleNumber, phone: phone, content: content, pass: pass, weight: weight, ton: ton, tonsize: tonsize }, success: res => { const _id = res.result._id; if (_id) { wx.hideLoading(); wx.showToast({ title: "恭喜!发送成功!", }) setTimeout(function () { wx.switchTab({ url: '/pages/index/index' }) }, 800) } else { wx.showToast({ title: res.result.errMsg, }) } } }) },
2024-11-22 - WXS日期转换?
想要实现,将数据库的时间转换为,今天,明天,后天,具体日期等。wxs写了段代码,打印结果是获取的数据库时间为Invalid Date 。数据库保存的时间两种方式和打印结果如图:在发布信息时,无论选择哪天,显示的都是今天。数据库保存的时间类型会影响转换吗? [图片][图片] 第二种 [图片] [图片] wxs代码: var timeFormat = function (dateString) { var date = getDate(dateString);// 传递日期字符串,得到日期 console.log('数据库的日期',date); var today = getDate() // 当前的时间 console.log('当前的日期',today) var timeStr = ''; var daysDifference = Math.abs(date.getTime() - today.getTime()); // console.log(daysDifference) var daysBetween = Math.floor(daysDifference/(1000*60*60*24)); console.log('天数差',daysBetween) var year = date.getFullYear(); var month = ('0' + (date.getMonth() + 1)).slice(-2); var day = ('0' + date.getDate()).slice(-2); var isToday = daysBetween === 0 ? '今天':''; var isTomorrow = daysBetween === 1 ? '明天':''; var isDayAfterTomorrow = daysBetween === 2 ? '后天':''; if(isToday){ timeStr = isToday; }else if(isTomorrow){ timeStr = isTomorrow; }else if(daysBetween = isDayAfterTomorrow){ timeStr = isDayAfterTomorrow; } else{ timeStr = year + "/" + month + "/" + day // timeStr = dateString } return timeStr; }
2024-11-21 - 如何让页面显示的后天随时间推移变成明天?
下面三张图,如何让页面中的后天,随着时间的推移,让后天变成明天,让日期变成后天,比如说,第一天是后天,第二天应该变成明天,后面日期(2024-11-20)变成后天在页面中显示。 目前的问题是,日期选择器含有今天,明天,后天和日期,保存到数据库也是今天,明天,后天,日期,显示到页面中的也是今天,明天,后天,但是页面中显示的不能随时间推移而改变。 想要实现的效果,日期选择器含有今天,明天,后天和日期。保存到数据库应该是什么?在页面中显示的应该随着时间的推移而改变。要怎么实现 [图片][图片][图片]
2024-11-17 - 下拉刷新失效?
如图布局图,在点击查询后,在查询的状态下,下拉刷新,没有退出查询状态,下拉刷新失效,在第二次下拉才生效。在查询状态下,切换到其他页面,再回到该页面,没有回到初始页面,一直保持在查询状态下。 想要的效果是,在查询状态下,下拉刷新退出查询状态,回到初始页面状态,从其他页面切换到该页面,回到初始页面。 [图片] 代码: /** * 获取选项卡 */ onItemChengdeEvent(event) { var index = event.detail.index; // console.log(index); this.setData({ currentIndex: index }); if (!this.data.isQuerying) { this.lowdrelease(); } else { this.onchaxun() } }, /** * 获取数据库数据 */ async loadData(start = 0, vehicle,newQuery = {}) { const that = this; const index = that.data.currentIndex; console.log(index); let query = {}; switch (index) { case 0: break; case 1: query = {carpool: '我要找车'}; break; case 2: query = {carpool: '我要找人'}; break; case 3: query = {carpool: '我找货车'}; break; case 4: query = {carpool: '我要找货'}; break; } console.log(query) if (that.data.isQuerying) { newQuery = _.and(query,{ startPoint: db.RegExp({ regexp: '^' + that.data.startPoint }), goal: db.RegExp({ regexp: '^' + that.data.goal }), }) } else { newQuery = query } console.log('条件查询', newQuery) try { let promise = db.collection(vehicle).where(newQuery); if (start > 0) { promise = promise.skip(start); } promise = promise.limit(2) .orderBy("redden.reddenStartTime", 'desc') .orderBy("topping.toppingStarttime", "desc") .orderBy("create_time", "desc"); const vehiclesRes = await promise.get(); const vehicles = vehiclesRes.data; console.log('获取数据库数据', vehicles) const countResult = await promise.count(); const total = countResult.total; console.log('总计数', total) const newVehicles = start > 0 ? this.data.vehicles.concat(vehicles) : vehicles; newVehicles.forEach((vehicle, index) => { vehicle.create_time = vehicle.create_time.toString(); }); const hasmore = false; return { newVehicles, total, hasmore, }; } catch (error) { console.log('failed to load data:', error); throw error; } }, /** * 获取初始数据 */ async lowdrelease(start = 0) { const that = this; try { const { newVehicles: vehicles, total: vehiclesTotal, hasmore: hasmore } = await that.loadData(start, 'vehicle'); that.setData({ vehicles: vehicles, hasmore: hasmore, result: vehiclesTotal, }) } catch (error) { console.log('failed to load data:', error); throw error; } }, /** * 点击查询事件 */ async onchaxun(start = 0) { const that = this; that.setData({ isQuerying:true }) try { const { newVehicles: vehicles, total: vehiclesTotal, hasmore: hasmore } = await that.loadData(start, 'vehicle'); that.setData({ startPointStr: '', goalStr: '', vehicles: vehicles, hasmore: hasmore, result: vehiclesTotal, }); } catch (error) { console.log('failed to load data:', error); throw error; } }, /** * 生命周期函数--监听页面显示 */ onShow() { this.lowdrelease(0); }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { this.lowdrelease(0); this.setData({ isQuerying: false }) wx.stopPullDownRefresh(); },
2024-11-12 - 在查询数据时,报错-601002?
如图,当点击查询按钮时,报错,当点击选项卡的时候,获取到对应的数据,当下拉刷新时,没有反应,当点击选项卡时,获取到对应的数据。求指教,这个查询条件的索引要如何弄? [图片][图片] data: { title: ["全部", "我要找车", "我要找人", "我找货车", "我要找货"], hasmore: false, vehicles: '', startPoint: '', goal: '', isQuerying: false, currentIndex: '', vhereRes: '', }, /** * 获取选项卡 */ onItemChengdeEvent(event) { var index = event.detail.index; this.setData({ currentIndex: index }); if (!this.data.isQuerying) { this.lowdrelease(); } else { this.onchaxun() } }, /** * 获取数据库数据 */ async loadData(start = 0, vehicle) { const that = this; const index = that.data.currentIndex; let query = {}; switch (index) { case 0: break; case 1: query = {carpool: '我要找车'}; break; case 2: query = {carpool: '我要找人'}; break; case 3: query = {carpool: '我找货车'}; break; case 4: query = {carpool: '我要找货'}; break; } console.log(query) const vhereRes = { startPoint: db.RegExp({ regexp: that.data.startPoint, options: 'i' }), goal: db.RegExp({ regexp: that.data.goal, options: 'i' }) }; console.log('查询事件起点和终点条件', vhereRes) const quer = that.data.isQuerying ? _.and(vhereRes, query) : query; console.log(quer) const promise = db.collection(vehicle).skip(start).limit(2) .orderBy("redden.reddenStartTime", 'desc') .orderBy("topping.toppingStarttime", "desc") .orderBy("create_time", "desc"); const dataRes = await promise.where(quer).get(); const vehicles = dataRes.data; console.log(vehicles); const countRes = await db.collection(vehicle).where(quer).count(); const total = countRes.total; console.log(total) const newVehicles = start > 0 ? this.data.vehicles.concat(vehicles) : vehicles; newVehicles.forEach((vehicle, index) => { vehicle.create_time = vehicle.create_time.toString(); }); const hasmore = false return {newVehicles,total,hasmore}; }, /** * 获取初始数据 */ async lowdrelease(start = 0) { const that = this; const {newVehicles: vehicles,total: vehiclesTotal,hasmore: hasmore} = await that.loadData(start, 'vehicle'); that.setData({ vehicles: vehicles, hasmore: hasmore, result: vehiclesTotal }) }, /** * 点击查询事件 */ async onchaxun(start = 0) { const that = this; that.setData({ isQuerying: true, }) const {newVehicles: vehicles,total: vehiclesTotal,hasmore: hasmore} = await that.loadData(start, 'vehicle'); that.setData({ startPointStr: '', goalStr: '', vehicles: vehicles, hasmore: hasmore, result: vehiclesTotal }); },
2024-11-11 - 点击查询按钮,获取到的数据不是对应的选项卡数据?
如图,在点击查询按钮之前,选择的是第二个选项卡,当点击查询按钮后,第二个选项卡的内容是第一个选项卡的内容,当点击选项卡的时候,才会获取对应的数据,也就是说,点击查询按钮获取到的是查询数据的初始数据,但是选项卡不是初始值。想要的效果是:点击查询按钮之前,选择的第二个选项卡,那么点击查询按钮后获取到的数据也应该是第二个选项卡的数据 第二问题是:如图2和图3:显示的Number类型,但是报警提示,传入componentes组件的不是Number类型,也就是重新编译代码时,才会有这个警告,其他操作就不会有这个警告出现,这个是什么情况 [图片] [图片][图片]
2024-11-07 - 上拉刷新,加载的数据不是对应选项卡的内容?
如图:当在第五个选项卡的位置,下拉刷新或者点击查询的时候,加载的数据是第一个选项卡的初始数据,而不是第三个选项卡的数据。想要的效果是,要么下拉或者点击查询事件之后,选项卡选中第一个选项卡,要么加载相当应选项卡的数据。 [图片] 代码: /** * 获取选项卡 */ onItemChengdeEvent(event) { var index = event.detail.index; this.setData({ currentTabIndex: index }); if(!this.data.isQuerying){ this.lowdrelease(index); }else{ this.onchaxun(index); } }, /** * 获取数据库数据 */ async lowdrelease(index,start = 0) { const that = this; let query = {}; switch (index) { case 0: break; case 1: query = { carpool: '我要找车' }; break; case 2: query = { carpool: '我要找人' }; break; case 3: query = { carpool: '我找货车' }; break; case 4: query = { carpool: '我要找货' }; break; } console.log('carpool条件',query) let promise = db.collection("wehicle").where(query); if (start > 0) { promise = promise.skip(start); } // 限制每次获取数据数量并排序 promise = promise.limit(5) .orderBy("redden.reddenStartTime", 'desc') .orderBy("topping.toppingStarttime", "desc") .orderBy("create_time", "desc"); const wehiclesRes = await promise.get(); const wehicles = wehiclesRes.data; console.log('获取数据库数据',wehicles) // 统计符合条件的总数而不是所有数据 const countResult = await promise.count(); console.log('总计数',countResult) // 合并当前获取的数据 const newWehicles = start > 0 ? that.data.wehicles.concat(wehicles) : wehicles; newWehicles.forEach((wehicle, index) => { wehicle.create_time = wehicle.create_time.toString(); }); // const hasmore = false; const hasmore = countResult.total > (that.data.wehicles.length + start); that.setData({ wehicles: newWehicles, hasmore: hasmore, result: countResult.total }); }, /** * 点击查询事件 */ async onchaxun(index,start = 0) { const that = this; that.setData({ isQuerying: true, }) const whereRes = { startPoint: db.RegExp({ regexp: that.data.startPoint}), goal: db.RegExp({ regexp: that.data.goal}), } console.log('查询事件起点和终点条件',whereRes) let query = {}; switch (index) { case 0: break; case 1: query = {carpool: '我要找车'}; break; case 2: query = {carpool: '我要找人'}; break; case 3: query = {carpool: '我找货车'}; break; case 4: query = {carpool: '我要找货'}; break; } console.log('查询事件查询条件',query) let promise = db.collection("wehicle").where(_.and(whereRes,query)) if (start > 0) { promise = promise.skip(start) } // 限制每次获取数据数量并排序 promise = promise.limit(2) .orderBy("redden.reddenStartTime", 'desc') .orderBy("topping.toppingStarttime", "desc") .orderBy("create_time", "desc"); const wehiclesRes = await promise.get(); const wehicles = wehiclesRes.data; console.log('查询事件获取数据库数据',wehicles) // 统计符合条件的总数而不是所有数据 const countResult = await promise.count(); console.log('查询事件总计数',countResult) // 合并当前获取的数据 const newWehicles = start > 0 ? that.data.wehicles.concat(wehicles) : wehicles; newWehicles.forEach((wehicle, index) => { wehicle.create_time = wehicle.create_time.toString(); }); // const hasmore = false; const hasmore = countResult.total > (that.data.wehicles.length + start); that.setData({ startPointStr: '', goalStr: '', wehicles: newWehicles, hasmore: hasmore, result:countResult.total, }); }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { this.lowdrelease(0); this.setData({ isQuerying: false, }) wx.stopPullDownRefresh(); },
2024-11-06