当前位置：首页 > news >正文

小程序setNavigationBarColor设置背景渐变,图片渐变

news 2025/9/13 5:29:02

小程序setNavigationBarColor设置背景渐变

第一种：渐变图片

<view class="Box" :style="'height:'+s_topImg+'rpx'" ><!-- 设置背景图片及自适应高度 --><view class="contain-box" :style="[{backgroundImage:'url('+backgroundImg+')'}, 'height:'+s_topImg+'rpx']" ><!-- 滚动动态设置样式 --><view :class="scrollTopShow?'top-item1':'top-item2'":style="'background:rgba(48, 154, 236,' +topOpacity+')'"><!-- 胶囊以上占位盒子 --><view :style="'height:'+s_top+'rpx', 'line-height:'+s_top+'rpx'"></view><!-- 动态设置高和行高与胶囊保持一致 --><view class="title-type" :style="['height:'+s_height+'rpx','line-height:'+s_height+'rpx']">项目订阅管理</view></view></view></view><script>export default {data() {return {backgroundImg: '/subscribe/static/img/topbg1.jpg', // 顶部背景图s_top: '100', //胶囊距离顶部距离s_height: '100', //胶囊行高	s_topImg: '80',scrollTopShow: true, // 顶部颜色默认隐藏topOpacity: 0,}},created() {this.initTopImg();},// 监听滚动事件onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替let scrollTop = e.scrollTop;this.topOpacity = scrollTop / 300 > 0.9 ? 1 : scrollTop / 300if (e.scrollTop != 0) {this.scrollTopShow = false;} else {this.scrollTopShow = true;}},methods: {// 初始化顶部背景图initTopImg() {let menuButtonInfo = uni.getMenuButtonBoundingClientRect();this.s_top = menuButtonInfo.top * 2;this.s_topImg = menuButtonInfo.top * 2+100 ;//+ 508this.s_height = menuButtonInfo.height * 2;},}}
</script><style lang="scss">page {background-color: #f8f9fa;}.Box{position: sticky;top: 0;z-index: 100;}.contain-box {width: 100%;background-size: 100% 100%;align-items: center;.top-item1 {.title-type {font-size: 36rpx;font-weight: 400;color: #fff;display: flex;justify-content: center;/* 水平居中 */}}.top-item2 {position: fixed;top: 0;width: 100%;.title-type {font-size: 36rpx;font-weight: 400;color: #fff;display: flex;justify-content: center;/* 水平居中 */}}}.top{width: 100%;height: 200px;background: linear-gradient(121deg, #94C7FE -1%, #1890FF 102%);box-shadow: 24px 52px 100px 0px rgba(90, 108, 234, 10%)}.setting{.header {background: linear-gradient(135deg, #007aff 0%, #0056d6 100%);color: white;padding: 20px 16px;text-align: center;// position: sticky;// top: 0;z-index: 100;box-shadow: 0 2px 10px rgba(0, 122, 255, 0.2);}.header h1 {font-size: 1.25rem;font-weight: 600;margin-bottom: 4px;}.header p {font-size: 0.875rem;opacity: 0.9;}.main {padding: 16px;padding-bottom: 100px;}.list {background: white;border-radius: 12px;margin-bottom: 16px;padding: 16px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);transition: all 0.3s ease;}.list:active {transform: scale(0.99);}.first {display: flex;justify-content: space-between;align-items: center;margin-bottom: 12px;}.title {font-size: 1.125rem;font-weight: 600;color: #2c3e50;}.subtitle {font-size: 0.75rem;padding: 4px 10px;border-radius: 10px;font-weight: 500;}/* 分类标识颜色 - 使用主题色变体 */.color1 {background-color: rgba(0, 122, 255, 0.1);color: #007aff;}.color2 {background-color: rgba(0, 122, 255, 0.15);color: #0062cc;}.color3 {background-color: rgba(0, 122, 255, 0.2);color: #0052b3;}.content {margin: 12px 0;padding: 12px;background: #f9f9f9;border-radius: 8px;}.second {display: flex;flex-direction: column;}.secondTip {font-weight: 600;color: #2c3e50;margin-bottom: 8px;font-size: 0.875rem;}.secondList {display: flex;flex-wrap: wrap;gap: 8px;}}</style>