uniapp云开发的支付宝小程序首页刚开不渲染

Question

uniapp云开发支付宝小程序每次打开不渲染，跳到其他tabbar页面再跳回来才渲染，真机测试没问题，体验版也很难复现，但是上线后就这样了，匪夷所思，添加了手动刷新也是一样

刚进入就这样了

跳转任何一个tabbar页面，再点左上角首页按钮跳回来，才正常

正常渲染

<view class="gonggebox" v-for="item in sortarr" :key="item._id"
                @click="click1jump(item.icon,item.grade1,'安装')">
                <image :src="item.icon" mode="widthFix"></image>
                <text>{{item.grade1}}</text>
            </view>

data() {
            return {
                // 云数据库请求的数组
                sortarr: [],
            }
        },
onLoad(option) {
            return this.getsortarr();
        },
//获取云数据库数据
            getsortarr() {
                const db = uniCloud.database() //创建数据库连接
                db.collection("mysort").get() //获取数据表的信息
                    .then(res => {
                        // console.log(res)
                        this.sortarr = res.result.data.map(it => {
                            it.localFakeId = createdFakeId();
                            it.grade2 = it.grade2 && it.grade2.map(item => {
                                item.parent_localFakeId = it.localFakeId;
                                item.localFakeId = createdFakeId();
                                item.grade3 = item.grade3 && item.grade3.map(
                                    single => {
                                        single.parent_parent_localFakeId = it
                                            .localFakeId
                                        single.parent_localFakeId = item
                                            .localFakeId;
                                        single.localFakeId = createdFakeId();
                                        return single;
                                    })

                                return item
                            })
                            return it
                        })
                        // this.$nextTick(() => {
                        //   this.$forceUpdate();// 页面渲染完成后的操作
                        // })
                          setTimeout(() => {
                                     this.$forceUpdate(); // 手动触发一次页面的渲染
                                 }, 500);  // 500ms后强制更新页面
                    })
                    .catch(err => {})
            },

Answer 1

【相关推荐】

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7782998
• 这篇博客也不错, 你可以看下uniapp—小程序自定义tabbar（非组件）（图文）
• 您还可以看一下 邱石老师的1小时开发商城类小程序课程中的 小程序借助tabbar实现底部导航栏小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 记录踩坑时刻：uniapp 微信小程序 自定义tabBar中的 三、自定义一个tabBar组件  部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

          注意：组件名称需要  和  组件目录名称一致

  

           在组件页面写好数据

  <template>
  	<view class="index">
  		<view class="tabBar">
  			<view class="TaBa">
  				<view class="Tablist" v-for="(item,index) in tabBar.list" :key="index" @click="TabBar(item,index)">
  					<view class="tabimg">
  						<image :src="current === index?item.selectedIconPath:item.iconPath"></image>
  					</view>
  					<view :class="current === index?'TextColor':'Text'">
  						{{item.text}}
  					</view>
  				</view>
  			</view>
  
              
  			<view class="TabBton">
  				<view class="Vido">
  				</view>
  			</view>
  		</view>
  	</view>
  </template>

  tabBar里面的数据可以  根据业务需求 替换自己的

  <script>
  	export default {
  		name: "tabBar",
  		//接收自定义tabar组件页面的标识 用来判断是否当前点击页面
  		props: {
  			current: Number
  		},
  		data() {
  			return {
  				tabBar: {
  					list: [{
  							pagePath: "/pages/index/index",
  							iconPath: "/static/Tdit/shouye.png",//这个放置未点击时的图片
  							selectedIconPath: "/static/Tdit/shouye-h.png",//这个放置点击时的图片 
  							text: "我的"
  						},
  						{
  							pagePath: "/pages/FenleiQuery/FenleiQuery",
  							iconPath: "",
  							selectedIconPath: "",
  							text: "分类"
  						},
  						{
  							pagePath: "/pages/ShoppingCart/ShoppingCart",
  							iconPath: "",
  							selectedIconPath: "",
  							text: "购物"
  						},
  						{
  							pagePath: "/pages/PointsMall/PointsMall",
  							iconPath: "",
  							selectedIconPath: "",
  							text: "商城"
  						},
  						{
  							pagePath: "/pages/PersonalCenter/PersonalCenter",
  							iconPath: "",
  							selectedIconPath: "",
  							text: "个人"
  						}
  					]
  				},
  			};
  		},
  		methods: {
  			//底部tab跳转
  			TabBar(item, index) {
  				uni.switchTab({
  					url: item.pagePath
  				})
  			}
  		}
  	}
  </script>

  <style lang="scss">
  	page {
  		height: 100%;
  		background-color: #F1F1F1;
  	}
  
  	.index {
  		width: 100%;
  
  		.tabBar {
  			position: fixed;
  			bottom: 0;
  			width: 100%;
  			height: 140rpx;
  			background: #6868EE;
  			box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);
  			display: flex;
  			flex-direction: column;
  			justify-content: space-between;
  			.TaBa {
  				width: 100%;
  				height: 100%;
  				display: flex;
  				align-items: center;
  				justify-content: space-around;
  
  				.Tablist {
  					display: flex;
  					flex-direction: column;
  					text-align: center;
  					justify-content: center;
  
  					.tabimg {
  						display: flex;
  						align-items: center;
  						justify-content: center;
  
  						image {
  							width: 44rpx;
  							height: 44rpx;
  						}
  					}
  
  					.Text {
  						margin-top: 5rpx;
  						font-size: 20rpx;
  						font-weight: 400;
  						color: #999999;
  					}
  
  					.TextColor {
  						margin-top: 5rpx;
  						font-size: 20rpx;
  						font-weight: 400;
  						color: #F0AD4E;
  					}
  				}
  			}
  
  			.TabBton {
  				width: 100%;
  				height: 36rpx;
  				display: flex;
  				align-items: center;
  				justify-content: center;
  
  				.Vido {
  					width: 268rpx;
  					height: 10rpx;
  					background: #bfa;
  					border-radius: 6rpx;
  				}
  			}
  		}
  	}
  </style>
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^