上海上市公司全部名单,百度seo排名优化提高流量,多用户商城网站建设,在哪里可以免费观看最新电影学习了评分组件、自定义导航栏
评分组件uni-rate 这是需要达到的效果图#xff0c;这里先分析下效果图#xff0c; 1、图片是从布局中间弹出的#xff0c;那这里就要用到uni-popup #xff0c;设置type从中间弹出 2、这个弹出的顶部和上一张的顶部布局是一样的#xff0c…学习了评分组件、自定义导航栏
评分组件uni-rate 这是需要达到的效果图这里先分析下效果图 1、图片是从布局中间弹出的那这里就要用到uni-popup 设置type从中间弹出 2、这个弹出的顶部和上一张的顶部布局是一样的都是标题和关闭按钮那就把上一张的布局拿过来 3、有用到评分那就在直接使用评分组件这里的评分是可以选择更改的那就查看评分的文档进行修改 4、底部有个按钮这里是最后实现的效果图原始图应该是刚进入的时候是不能点击按钮的只有进行评分后才能点击 下面是这里的样式
.scorePopup {background: #fff;background: #fff;padding: 30rpx;width: 70vw;border-radius: 30rpx;.content {padding: 30rpx 0;display: flex;justify-content: center;align-items: center;.text {color: #FFCA3E;padding-left: 10rpx;width: 80rpx;line-height: 1em;text-align: right;font-size: 28rpx;}}.footer {padding: 10rpx 0;display: flex;align-items: center;justify-content: center;}}下面是页面布局
uni-popup refscorePopup typecenter :is-mask-clickfalseview classscorePopupview classpopHeaderview/viewview classtitle壁纸评分/viewview classclose clickclickScoreCloseuni-icons typecloseempty size18 color#999/uni-icons/view/viewview classcontentuni-rate v-modeluserScore allowHalf disabled-color#FFCA3E /text classtext{{userScore}}分/text/viewview classfooterbutton clicksubmitScore :disabled!userScore typedefault sizeminiplain确认评分/button/view/view/uni-popup这里有个地方需要注意 :is-mask-click“false”这是popup中的属性设置这个的意思是点击空白或者其他地方不能让弹出框取消掉只有点击设定的关闭图标才能取消掉
uni-rate v-modeluserScore allowHalf disabled-color#FFCA3E /
text classtext{{userScore}}分/text这里多说下当初设置这里的时候我是在下面设置了一个变量想着是只要选择了星星然后监听组件返回的值进行赋值这里调用就可以了但最后发现虽然是实现了但是后台报警告查了半天也不知道什么原因最后还是复盘老师视频才做了现在这种这里就是rate的model和定义的变量名都是统一名称然后也不用专门监听rate的chang直接在需要的地方调用变量就可以为什么这样不清楚先记录下。
至于点击确定的办法这里就不写了前面都有案例的。
自定义导航栏
这是自定义导航栏使用的办法就是在需要的页面直接引用自定义组件就可以了这里先发个效果图 这里就是自定义导航栏
templateview classlayoutview classnavbarview classstatusBar/viewview classtitleBarview classtitle标题/viewview classsearchuni-icons classicons typesearch color#888 size18/uni-iconstext classtext搜索/text/view/view/viewview classfill/view/view
/templatescript setup/scriptstyle langscss scoped
.layout{.navbar{ position: fixed;top: 0;left: 0;width: 100%;z-index: 10;//上面这几个属性就是设置布局在顶部不会随着滑动而改变位置background: //这就是背景渐变linear-gradient(to bottom,transparent,#fff 400rpx),linear-gradient(to right,#beecd8 20%,#F4E2D8); .statusBar{border: 1px solid red;}.titleBar{display: flex;padding: 0 30rpx;border: 1px solid green;align-items: center;.title{font-size: 22rpx;font-weight: 700;color: $text-font-color-1;}.search{width: 220rpx;height: 50rpx;border-radius: 60rpx;background: rgba(255, 255, 255,0.4);border: 1px solid #fff;margin-left: 30rpx;color: #999;font-size: 28rpx;display: flex;.text{padding-left: 10rpx;}.icons{margin-left:5rpx;}}}}
}
/style上面是自定义导航栏的代码但在实际使用过程中还是发现有些其他的问题手机的状态栏会遮住状态栏这里还没有学到就只记录到这里 明天的记录中会有计算状态栏的高度等。
