uni-app 希望有一个人中心页 顶部头视图为图片 页面下拉可放大伸缩背景图片

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app 希望有一个人中心页 顶部头视图为图片 页面下拉可放大伸缩背景图片

希望有一个人中心页,顶部的头视图是一个图片,然后页面下拉可以放大伸缩视图的背景图片

Harmonyos Next教程
2 回复

写一个咯 在你的最外围容器上，比如<view class="content"> 加上 @touchmove=“touchmove” @touchstart=“touchstart” @touchend=“touchend”
你的头部容器： <view class="head" :style="{height:changeHeight+'px'}" :class="changeBig?'change':''">
<image class="image" src="xxx.jpg" mode="aspectFill" />
</view> data() {
return {
changeBig:false,//class开关
height:300,//默认高度
changeHeight:300,//变化高度
startY:"",//起手Y坐标
touchY:""//滑动中的Y坐标
}
} methods: {
touchstart: function(e) {
this.startY = e.touches[0].pageY
this.changeBig = false
},
touchmove: function(e) {
this.touchY = (e.touches[0].pageY - this.startY)/2//这里控制容器下拉时增加的高度除于2除于10都随你高兴
this.changeHeight = this.height + this.touchY
},
touchend: function(e) {
this.changeHeight = this.height
this.changeBig = true
}
} 最后给它复位的时候加个动画 .head{
overflow:hidden;max-height:600px;
&.change{transition:height 0.5s;}
.image{height:100%;width:100%;}
} 太细致的懒得写，大致有那个意思我看行了。


在 uni-app 中实现一个带有可伸缩背景图片的个人中心页面，可以通过自定义组件和页面样式来实现。以下是一个简单的示例代码，展示了如何实现这个功能。

首先，创建一个新的 uni-app 项目或在现有项目中添加一个新页面，比如 pages/profile/profile.vue。

profile.vue

<template>
  <view class="container">
    <scroll-view scroll-y="true" class="scroll-view">
      <!-- 顶部头视图 -->
      <view class="header" :style="{ backgroundImage: 'url(' + headerImage + ')' }">
        <image class="stretch-image" :src="headerImage" mode="aspectFill"></image>
      </view>
      
      <!-- 其他内容 -->
      <view class="content">
        <!-- 这里是个人中心的其他内容 -->
        <text>这里是个人信息</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      headerImage: '/static/header.jpg' // 替换为你的图片路径
    };
  },
  onPageScroll(e) {
    const scrollTop = e.scrollTop;
    const header = this.$refs.header;
    const maxScale = 1.5; // 最大缩放比例
    const minScale = 1; // 最小缩放比例（原始大小）
    const scale = Math.max(minScale, Math.min(maxScale, 1 - scrollTop / 300)); // 300为滚动触发缩放的阈值，可根据需要调整
    header.style.transform = `scale(${scale})`;
  }
};
</script>

<style scoped>
.container {
  height: 100vh;
  overflow: hidden;
}

.scroll-view {
  height: 100%;
}

.header {
  width: 100%;
  height: 200px; /* 头部高度 */
  position: relative;
  overflow: hidden;
}

.stretch-image {
  width: 100%;
  height: 100%;
  transform-origin: center top;
  transition: transform 0.3s ease;
}

.content {
  padding: 20px;
}
</style>

注意事项

  1. 图片路径：确保 headerImage 的路径正确，且图片资源已放置在项目的静态资源目录中。
  2. 滚动监听：onPageScroll 方法用于监听页面滚动事件，根据滚动距离动态调整头部图片的缩放比例。
  3. 样式调整：根据需要调整头部高度、缩放比例以及触发缩放的滚动阈值。
  4. 性能优化：如果页面内容复杂，可以考虑使用 vue 的 keep-alive 组件或其他性能优化手段。

以上代码提供了一个基本的实现框架，你可以根据实际需求进一步调整和完善。

回到顶部