仿dy界面 右滑消失 左滑出现 nvue

原创 已于 2025-08-27 14:30:51 修改 · 619 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #html

于 2025-08-27 14:29:27 首次发布
<template>
  <view
    class="content"
    :style="{ height: screenHeight + 'px' }"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <swiper
      :style="{
        height: screenHeight + 'px',
        width: screenWidth + 'px',
      }"
      :vertical="true"
      @change="handleSwiperChange"
    >
      <swiper-item v-for="item in videoList" :key="item.id">
        <view class="video_box">
          <video
            :src="item.src"
            :style="{
              height: screenHeight + 'px',
              width: screenWidth + 'px',
            }"
            :autoplay="true"
            :controls="false"
            :enable-progress-gesture="false"
            :show-loading="false"
            :show-play-btn="false"
            :show-center-play-btn="false"
            :show-fullscreen-btn="false"
            :vslide-gesture-in-fullscreen="false"
            :show-progress="false"
            :http-cache="true"
          />
          <view class="box_main" v-if="isTopTabShow">
            <!-- 这是头部的 -->
            <view
              class="tab_box"
              :style="{ width: screenWidth + 'px', top: statusBar + 'px' }"
            >
              <view class="tab_box_left">
                <view class="tab_box_left_box">
                  <image
                    class="tab_box_left_avatar"
                    src="/static/image/tx.jpeg"
                    mode="scaleToFill"
                  ></image>
                  <view class="tab_box_left_name">我是主播</view>
                  <view class="tab_box_left_gz">关注</view>
                </view>
              </view>
              <view class="tab_box_right">
                <view class="tab_box_right_box" v-for="item in 3" :key="item">
                  <image
                    class="tab_box_right_box_avatar"
                    src="/static/image/tx.jpeg"
                    mode="scaleToFill"
                  ></image>
                </view>
                <view class="tab_box_right_title">114.56w</view>
                <view class="tab_box_right_icon">X</view>
              </view>
            </view>
            <!-- 这是评论的 -->
            <scroll-view
              show-scrollbar="false"
              :scroll-into-view="scrollIntoIndex"
              class="status_bar_scroll"
              scroll-y
            >
              <view
                v-for="(item, index) in textList"
                :key="index"
                class="status_bar_scroll_item"
                :id="'chatItem_' + index"
              >
                <text class="status_bar_scroll_item_name"
                  >{{ item.name }}:</text
                >
                <text class="status_bar_scroll_item_title">{{
                  item.title
                }}</text>
              </view>
            </scroll-view>
            <!-- 这是底部发送评论以及礼物 -->
            <view class="input_box" :style="{ width: screenWidth + 'px' }">
              <view
                class="input_box_item"
                :style="{ width: screenWidth - 100 + 'px' }"
              >
                <input
                  type="text"
                  class="status_bar_inp"
                  placeholder="说点什么..."
                  @blur="blurInput"
                  v-model="textValue"
                />
              </view>
              <view>
                <image
                  class="liwuImg"
                  src="/static/image/liwu.png"
                  mode="scaleToFill"
                ></image>
              </view>
            </view>
            <!-- 这是侧边的 -->
            <view class="right_box_cell">
              <view class="right_box_cell_avatar">
                <image
                  class="right_box_cell_avatar_img"
                  src="/static/image/tx.jpeg"
                  mode="scaleToFill"
                ></image>
                <view class="right_box_cell_avatar_gz">+</view>
              </view>
              <view
                v-for="item in right_box_list"
                :key="item.id"
                class="right_box_cell_list"
              >
                <view class="right_box_cell_list_df">
                  <view class="right_box_cell_list_item">{{ item.title }}</view>
                  <image
                    class="right_box_cell_list_item_img"
                    :src="item.img"
                    mode="scaleToFill"
                  ></image>
                </view>
              </view>
            </view>
          </view>
          <view class="fanhui" v-else @click="fanhuiBtn">返回</view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  components: {},
  data() {
    return {
      vodUrl: "/static/image/WeChat_20240325184451.mp4",
      screenBottom: 0, //底部安全距离
      textValue: "", //发送的内容
      scrollIntoIndex: "", //这是为了解决滚动条定位问题
      loadOpen: true,
      textList: [
        {
          name: "张三",
          id: 0,
          title: "dahjjsdhadgfalgdjklgklfdfklghdffsjkfsdkgljfg",
        },
      ],
      videoList: [
        {
          id: 0,
          title: "张三",
          src: "/static/image/20d0c2f268e5a7622d93bd88b6deb4e8.mp4",
        },
        {
          id: 1,
          title: "李四",
          src: "/static/image/WeChat_20240325184451.mp4",
        },
      ],
      right_box_list: [
        {
          id: 0,
          title: "关注",
          img: "",
        },
        {
          id: 1,
          title: "评论",
        },
        {
          id: 2,
          title: "分享",
          img: "/static/image/share.png",
        },
      ],
      isTopTabShow: true,
      startX: 0, // 触摸起始 X 坐标
      moveDistance: 0, // 滑动距离（当前 X - 起始 X）
    };
  },
  onLoad(options) {
    this.getScreenHeight();
  },
  computed: mapState({
    customBar: (state) => state.set.StatusBar.customBar,
    statusBar: (state) => state.set.StatusBar.statusBar,
    screenHeight: (state) => state.set.StatusBar.screenHeight,
    screenWidth: (state) => state.set.StatusBar.screenWidth,
  }),
  methods: {
    /* 下拉刷新回调 */
    refreshData() {
      this.$emit("refreshData");
    },
    //swiper切换
    handleSwiperChange(e) {
      this.isTopTabShow = true;
      console.log(e);
    },
    fanhuiBtn() {
      this.isTopTabShow = true;
    },
    handleTouchStart(e) {
      if (e.touches.length > 1) return;
      // ② 跨端兼容：H5 用 clientX（视口坐标），App 用 screenX（屏幕坐标），避免滚动影响
      const touch = e.touches[0];
      this.startX =
        process.env.VUE_APP_PLATFORM === "h5" ? touch.clientX : touch.screenX;
      // ③ 记录起始 Y 坐标（用于后续判断“水平滑动”还是“垂直滑动”，防误触）
      this.startY =
        process.env.VUE_APP_PLATFORM === "h5" ? touch.clientY : touch.screenY;

      this.moveDistance = 0; // 重置滑动距离
      this.isHorizontalSlide = false; // 标记是否为水平滑动（默认否）
    },

    handleTouchMove(e) {
      if (e.touches.length > 1) return;

      const touch = e.touches[0];
      const currentX =
        process.env.VUE_APP_PLATFORM === "h5" ? touch.clientX : touch.screenX;
      const currentY =
        process.env.VUE_APP_PLATFORM === "h5" ? touch.clientY : touch.screenY;

      const moveX = currentX - this.startX;
      const moveY = currentY - this.startY;

      if (!this.isHorizontalSlide) {
        this.isHorizontalSlide = Math.abs(moveX) > Math.abs(moveY) * 2;
      }

      if (this.isHorizontalSlide) {
        this.moveDistance = moveX;
      }
    },

    handleTouchEnd() {
      if (!this.isHorizontalSlide) {
        this._resetTouchData();
        return;
      }

      const screenWidth =
        this.screenWidth || uni.getSystemInfoSync().screenWidth;
      const threshold = screenWidth * 0.08;

      if (this.moveDistance > threshold) {
        if (this.isTopTabShow) {
          this.isTopTabShow = false;
        }
      } else if (this.moveDistance < -threshold) {
        if (!this.isTopTabShow) {
          this.isTopTabShow = true;
        }
      }

      this._resetTouchData();
    },

    _resetTouchData() {
      this.startX = 0;
      this.startY = 0;
      this.moveDistance = 0;
      this.isHorizontalSlide = false;
    },
    getScreenHeight() {
      const systemInfo = uni.getSystemInfoSync();
      console.log("系统信息:", systemInfo);
      // 屏幕可用高度（不含导航栏和状态栏，适合布局）
      this.screenBottom = systemInfo.safeAreaInsets.bottom;

      console.log(
        "屏幕高度（windowHeight）:",
        this.screenHeight,
        this.screenWidth,
        this.screenBottom
      );
    },
    // 跳转页面底部
    scrollToBottom() {
      let index = this.textList.length - 1;
      console.log("index", index);
      this.scrollIntoIndex = "chatItem_" + index;
    },
    blurInput() {
      this.textList.push({
        name: "我是帅哥",
        id: Math.random(),
        title: this.textValue,
      });
      this.$nextTick(() => {
        this.scrollToBottom();
      });
      console.log("----", this.scrollIntoIndex);
      this.textValue = "";
    },
  },
};
</script>

<style scoped>
.tab_box_right {
  flex-direction: row;
  align-items: center;
}
.tab_box_right_box {
  flex-direction: row;
  align-items: center;
}
.tab_box_right_title {
  font-size: 12rpx;
  background: #0000007a;
  border-radius: 20%;
  margin: 0 5px;
}
.tab_box_right_icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tab_box_right_box_avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.liwuImg {
  width: 30px;
  height: 30px;
}
.tab_box_left_box {
  flex-direction: row;
  align-items: center;
}
.tab_box_left_name {
  margin: 0 10px;
  font-size: 14px;
}
.tab_box_left {
  padding: 2px;
  background: #0000007a;
  border-radius: 20px;
}
.tab_box_left_avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.tab_box_left_gz {
  font-size: 12px !important;
  background-color: red;
  width: 40px;
  border-radius: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.right_box_cell_list_item {
  background-color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.right_box_cell_list_df {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.right_box_cell {
  position: absolute;
  right: 20px;
  top: 300px;
}
.right_box_cell_list_item_img {
  width: 20px;
  height: 20px;
}
.right_box_cell_avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc;
  margin-bottom: 20px;
}
.right_box_cell_avatar_img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.right_box_cell_avatar_gz_text {
  font-size: 12px;
  color: #fff;
}
.right_box_cell_avatar_gz {
  position: absolute;
  bottom: -5px;
  width: 20px;
  height: 20px;
  background-color: red;
  left: 0%;
  transform: translateX(50%);
  display: flex;
  color: #fff;
  justify-content: center;
  align-items: center;
}
.status_bar_scroll {
  height: 150px;
  width: 200px;
  overflow: hidden;
  position: absolute;
  bottom: 120px;
  left: 10px;
  color: #fff;
  /* background-color: #ccc; */
  border-radius: 20px;
  padding: 10px;
}
.status_bar_scroll_item {
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  flex-direction: row;
  align-items: center;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  margin-bottom: 10px;
}
.status_bar_scroll_item_title {
  flex: 1;
  lines: 2;
  text-overflow: ellipsis;
}
.box_main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.fanhui {
  position: absolute;
  bottom: 50px;
  right: 20px;
  color: #fff;
}
.tab_box {
  height: 50px;
  /* background-color: rgba(255, 255, 255, 0.2); */
  flex: 1;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.status_bar_scroll_item_name {
  color: #74bcb9;
  margin-right: 10px;
}
.status_bar_item {
  color: #fff !important;
}
.video_box {
  position: relative;
}
.input_box {
  position: absolute;
  height: 50px;
  bottom: 50px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.input_box_item {
  border-radius: 10px;
  height: 50px;
  border: 1px solid #ccc;
}
.status_bar_inp {
  height: 50px;
}
</style>

CSC_TA
关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值