- 双角色tabbar底部导航栏,切换和真机不一样,什么问题?
模拟器上显示正常,真机上的问题是,在首页进入论坛角色,点击我的页面中去社区按钮,页面跳转了,tabbar没有切换,当在首页进入社区角色,点击我的页面中去论坛的按钮,页面跳转了,tabbar没有切换,试了无数次,都是这样的问题。这是什么问题,开发工具。1.05版本的
星期日 08:59 - 双角色tabbar底部导航栏,切换不正常,什么原因?
双角色tabbar底部导航栏,在首页进入,都是正常,在角色中我的页面设定了“去社区”或者“去论坛”两个切换按钮,当点击这个按钮时,切换成功,但是在点击tabbar中的按钮时,多点几次,在论坛角色的时候,就切换到了社区的角色,又或者论坛角色和社区角色来回切换,尤其在点击“我的”按钮时,这个问题是什么问题,怎么解决? 担心有些时候,代码片段打不开,复制部分代码如下: 首页index-wxml代码: <view class="title"> <view class="jobs-group"> <image class="jobs-img" src="../../images/jobs.jpeg"></image> <button class="jobs" bindtap="goto" data-type="0">论坛</button> </view> <view class="separate"></view> <view class="jobs-group"> <image class="jobs-img" src="../../images/enterprise.jpg"></image> <button class="jobs" bindtap="goto" data-type="1">社区</button> </view> </view> js代码: Page({ goto(e){ console.log(e); let type = e.currentTarget.dataset.type; //把权限存储到缓存当中 wx.setStorageSync('user',type); if(type == "0"){ wx.switchTab({ url:'../jobs/index/index' }) }else{ wx.switchTab({ url:'../enterprise/index/index' }) } }, }) <!--custom-tab-bar/index.wxml--> <view class="tab-bar"> <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 {{selected === item.selected ? 'active' : ''}}" >{{item.text}}</view> </view> </view> <view class="indicator-border"></view> <view class="indicator"> <view class="indicator-item"> <image class="indicator-image" src="/images/jia.png"></image> <view class="indicator-item-text">发布</view> </view> </view> // custom-tab-bar/index.js Component({ data: { allList: [ [{ "pagePath": "/pages/jobs/index/index", "iconPath": "/images/me-gray.png", "selectedIconPath": "/images/me-green.png", "text": "论坛", "selected": "0" }, {}, { "pagePath": "/pages/jobs/me/me", "iconPath": "/images/me-gray.png", "selectedIconPath": "/images/me-green.png", "text": "我的", "selected": "1" } ], [{ "pagePath": "/pages/enterprise/index/index", "iconPath": "/images/me-gray.png", "selectedIconPath": "/images/me-green.png", "text": "社区", "selected": "2" }, {}, { "pagePath": "/pages/enterprise/me/me", "iconPath": "/images/me-gray.png", "selectedIconPath": "/images/me-green.png", "text": "我的", "selected": "3" } ] ], selectedList: [] }, /** * 生命周期的方法:当组件被加载的时候调用 */ lifetimes:{ attached(){ if(wx.getStorageSync('user') == '0'){ this.setData({ selectList:this.data.allList[0] }) }else{ this.setData({ selectList:this.data.allList[1] }) } }, show(){ this.updateTabbar(); } }, /** * 组件的方法列表 */ methods: { onwidthTap(e) { console.log(e); let path = e.currentTarget.dataset.path; let selected = e.currentTarget.dataset.selected; wx.switchTab({ url:path }) }, updateTabbar(){ const userType = wx.getStorageSync('user') || '0'; this.setData({ selectList:this.data.allList(userType) }) } } }) <!--pages/jobs/me/me.wxml--> <view class="switch-group" bindtap="onSwitch"> <image class="switch-image" src="../../../images/switch.png"></image> <view class="switch-text">去社区</view> </view> // pages/jobs/me/me.js Page({ onSwitch(){ wx.setStorageSync('user','1'); wx.switchTab({ url:'../../enterprise/index/index' }); //强制更新自定义tabbar(需配合组件改造) const tabbar = this.getTabBar(); tabbar.setData({ selectList: tabbar.data.allList[0] }); }, onShow() { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: "1" }) } }, }) <!--pages/enterprise/me/me.wxml--> <view class="switch-group" bindtap="onSwitchEvent"> <image class="switch-image" src="../../../images/switch.png"></image> <view class="switch-text">去论坛</view> </view> // pages/enterprise/me/me.js Page({ onSwitchEvent(){ wx.setStorageSync('user','0'); wx.switchTab({ url:'../../jobs/index/index' }); //强制更新自定义tabbar(需配合组件改造) const tabbar = this.getTabBar(); tabbar.setData({ selectList: tabbar.data.allList[0] }); }, /** * 生命周期函数--监听页面显示 */ onShow() { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: "3" }) } }, })
星期六 21:03 - 自定义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