如何选择低价网站建设,合肥做公司网站公司,东莞大岭山镇网站建设,wordpress主题wind在小程序端可以有很多好玩的小玩意#xff0c;目前网上比较有趣的就是有一个交友盲盒#xff0c;能抽出和找出对象的一个有趣的小程序#xff0c;所以今天给大家带来用uniapp搭建的交友盲盒#xff0c;大家再根据自己的情况去搭建自己的后端和数据库来完成自己的一个小项目… 在小程序端可以有很多好玩的小玩意目前网上比较有趣的就是有一个交友盲盒能抽出和找出对象的一个有趣的小程序所以今天给大家带来用uniapp搭建的交友盲盒大家再根据自己的情况去搭建自己的后端和数据库来完成自己的一个小项目 首先大家要下载好hbuider来编写我们的uniapp项目这个之前就介绍过了没有安装的自行去安装一下就可以了。 环境准备好了之后就可以开始动手准备了先看一下最终的结果 基本上pc端和小程序端是大同小异样式方面没有太大的差别下面就是代码的分析。
这里我就不去分析一条条代码是什么意思给大家自行去分析因为项目比较简单大家有一定基础就可以看得明白因为没有功能大家可以根据自己的后端接口来完善功能的需求达到自己的目的。
首页页面布局
templateview classcontentview classtopimage src../../static/bg.png modewidthFix/image/viewview classsubjectview classleftview classimgmanimage src../../static/man.png mode/image/viewview classchair/viewview classman男生盒子/viewview classenter放入男生纸条/viewview classout取出男生纸条/view/viewview classrightview classimgwumanimage src../../static/wuman.png mode/image/viewview classchair/viewview classman女生盒子/viewview classenter clickwumen放入女生纸条/viewview classout取出女生纸条/view/view/viewview classsub我的纸条/view/view
/templatescriptexport default {data() {return {title: Hello}},onLoad() {},methods: {wumen() {uni.showToast({title: 成功})}}}
/scriptstyle scoped langscss.imgwuman {image {width: 800rpx;height: 800rpx;}position: absolute;top: -78%;left: -68%;}.imgman {image {width: 800rpx;height: 800rpx;}position: absolute;top: -78%;left: -65%;}.top {width: 100%;height: 300rpx;/* background-color: pink; */border-radius: 50rpx;box-sizing: border-box;}.top image {box-sizing: border-box;width: 100%;height: 100%;}.subject {height: 600rpx;margin-top: 10%;// background-color: aliceblue;display: flex;justify-content: center;align-items: center;}.subject .left {position: relative;width: 45%;height: 550rpx;background-color: #119DFC;margin-right: 30rpx;}.subject .left {border-radius: 20rpx;.chair {width: 200rpx;height: 30rpx;border-radius: 50rpx;background-color: #fff;margin: 50rpx auto;}.man {font-size: 50rpx;font-family: 宋体;text-align: center;color: #fff;}}.subject .right {position: relative;border-radius: 20rpx;width: 45%;height: 550rpx;background-color: #FF538F;}.subject .right {border-radius: 20rpx;.chair {width: 200rpx;height: 30rpx;border-radius: 50rpx;background-color: #fff;margin: 50rpx auto;}.man {font-size: 50rpx;font-family: 宋体;text-align: center;color: #fff;}}.enter,.out {position: relative;z-index: 9;width: 300rpx;height: 100rpx;background-color: #000;color: #fff;text-align: center;border-radius: 15rpx;margin: 0 auto;margin-top: 18%;line-height: 100rpx;}.sub {width: 90%;height: 100rpx;background-color: #FA91A8;margin: 0 auto;margin-top: 5%;border-radius: 50rpx;text-align: center;line-height: 100rpx;}
/style关于我的页面布局
templateview/view
/templatescriptexport default {data() {return {}},methods: {}}
/scriptstyle/style
