<!-- 品种选择 -->
<template>
<view>
<view class="title">{{ name }}的品种是?</view>
<view class="box">
<scroll-view scroll-y="true" style="height: 740rpx;">
<view class="breed" v-for="(item, index) in list" :key="index">
<view class="brand-img">
<image :src="item.picUrl"></image>
<view class="mask" :class="isactive === index ? 'cuIcon-check ' : ''" @click="changeMask(index)"></view>
</view>
<view class="brand-name">{{ item.name }}</view>
</view>
</scroll-view>
</view>
<view class="next btn" @tap="goto()">下一步</view>
<view class="skip btn" @tap="goto()">跳过</view>
</view>
</template>
<script>
import { petClass } from "@/api/mine/pet"
export default {
data() {
return {
isactive: false,
name: '',
// 宠物类型
bigClass: '',
// 宠物头像
url: '',
// 宠物品种id
classId: '',
list: []
};
},
onLoad(options) {
console.log(options);
this.bigClass = options.bigClass;
console.log(this.bigClass);
this.url = options.url;
},
onShow() {
if(this.bigClass == 1) {
this.name = '小喵'
this.$http({
url: `${petClass}` + this.bigClass
}).then(res => {
this.list = res.data.data
})
} else {
this.name = '小汪'
this.$http({
url: `${petClass}` + this.bigClass
}).then(res => {
this.list = res.data.data
})
}
},
methods: {
changeMask(index) {
this.isactive = index;
this.classId = this.list[index].id;
if (this.url == '') {
this.url = this.list[index].picUrl;
}
console.log(this.url);
}
}
};
</script>
<style lang="scss" scoped>
.title {
margin: 10rpx 0 25rpx 40rpx;
font-size: 37rpx;
color: #333333;
font-family: WDCH;
}
.box {
margin-left: 80rpx;
margin-bottom: 60rpx;
display: flex;
// white-space: nowrap;
flex-direction: row;
flex-wrap: wrap;
.breed {
display: inline-block;
width: 170rpx;
height: 210rpx;
margin-right: 40rpx;
margin-bottom: 40rpx;
.brand-img {
position: relative;
width: 170rpx;
height: 170rpx;
border-radius: 50%;
// border: 1px solid #bbb;
image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.brand-name {
display: flex;
justify-content: center;
align-items: center;
margin-top: 8rpx;
}
}
}
.mask {
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
// background: rgba($color: #000000, $alpha: 0.3);
color: #fff;
border-radius: 50%;
}
.cuIcon-check {
display: flex;
justify-content: center;
align-items: center;
font-size: 80rpx;
background: rgba($color: #000000, $alpha: 0.3);
}
.btn {
display: flex;
justify-content: center;
align-items: center;
width: 210rpx;
height: 74rpx;
border-radius: 37rpx;
border: 1px solid #707070;
margin-left: 270rpx;
}
.next {
margin-bottom: 34rpx;
}
</style>

- 发布:2022-03-08 19:58
- 更新:2022-03-08 23:38
- 阅读:335
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 家庭中文版20H2
HBuilderX类型: 正式
HBuilderX版本号: 3.3.11
第三方开发者工具版本号: 微信开发者工具 Stable 1.05.2201240
基础库版本号: 2.22.1
项目创建方式: HBuilderX
示例代码:
操作步骤:
就是上一个页面传了参数到这个页面,这个页面使用onload(options){}去接收上一个页面传过来的参数,但是onload无效
就是上一个页面传了参数到这个页面,这个页面使用onload(options){}去接收上一个页面传过来的参数,但是onload无效
预期结果:
这个页面onload可以正常使用,并获取到上一个页面传递过来的参数
这个页面onload可以正常使用,并获取到上一个页面传递过来的参数
实际结果:
这个页面onload不能正常使用,不能获取到上一个页面传递过来的参数
这个页面onload不能正常使用,不能获取到上一个页面传递过来的参数
bug描述:
在页面内写的页面生命周期onload、onshow等会根本没有反应,console.log也没有打印出任何东西,但是有的页面却可以,已经确定看过了不是使用组件,就是在普通页面内使用
1 个回复
小枫叶 - 外包接单加v:wlmk1234567 注明来意
生命周期正常啊,刚试了下