uniapp实现微信小程序pc端需求:双击表格行跳转详情,编辑完返回,表格滚动定位到之前选择的表格行

需求:实现双击表格行跳转详情编辑页面,编辑完返回时定位到之前选择的表格行
1.修改了uniapp官方组件库uni-table中的uni-tr的源码,添加@click事件,添加<slot name="scroll"></slot>插槽
html 复制代码
 <block>
    <slot name="scroll"></slot>
    <view
      class="uni-table-tr"
      @click="rowClick"
      :class="{ 'is-active': isActive }">
      <view
        v-if="selection === 'selection'"
        class="checkbox"
        :class="{ 'tr-table--border': border, 'checkbox-head': isHeadTr }">
        <table-checkbox
          :checked="checked"
          :indeterminate="indeterminate"
          :disabled="disabled"
          @checkboxSelected="checkboxSelected"></table-checkbox>
      </view>
      <slot></slot>
    </view>
  </block>

添加<slot name="scroll"></slot>插槽的目的是搭配scroll-view标签与其scroll-into-view属性,用于渲染滚动定位元素,实现滚动定位
<template/><block/>并不是一个组件,它们仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

但实际使用中发现<template/> 做包装元素会提示编译错误,使用 <block/>则很正常

模拟双击效果

js 复制代码
 rowClick(e) {
      let currentTime = e.timeStamp;
      if (currentTime - this.lastTapTime < 300) {
        // 执行双击操作
        this.$emit("rowClick", "");
      } 
      // 更新点击时间
      this.lastTapTime = currentTime;
    },
2.页面中使用uni-table,使用scroll-view滚动,使用其scroll-into-view属性实现滚动定位
html 复制代码
 <template>
  <scroll-view scroll-y="true" class="scroll" :scroll-into-view="scrollid">
    <view class="table-content">
      <uni-table
        ref="table2"
        stripe
        emptyText="暂无更多数据"
        class="table-content"
        type="selection"
        @selection-change="selectionChange2"
      >
        <uni-tr isHeadTr="true">
          <uni-th align="center" width="80">序号</uni-th>
          <uni-th align="center" width="150">计划开始时间</uni-th>
          <uni-th align="center" width="150">计划结束时间</uni-th>
        </uni-tr>
        <uni-tr
          v-for="(item, index) in listDataSucess"
          :key="item.id"
          @rowClick="rowClick(item)"
          :is-active="item.id === scrollintoid"
        >
          <template #scroll>
            <text id="scrollId" v-if="item.id === scrollintoid"></text>
          </template>
          <uni-td align="center">
            <view>{{ index + 1 }}</view>
          </uni-td>
          <uni-td align="center">{{ item.kssj ? item.kssj : "" }}</uni-td>
          <uni-td align="center">{{ item.jssj ? item.jssj : "" }}</uni-td>
        </uni-tr>
      </uni-table>
    </view>
  </scroll-view>
</template>
scroll-into-view需要提供滚动到的元素的id,scroll-into-view可以动态绑定id(:scroll-into-view="scrollid"),但是滚动到元素的id不能动态绑定,所以只能通过v-if渲染这个元素

通过v-if渲染这个元素能触发滚动

html 复制代码
<template #scroll>
   <text id="scrollId" v-if="item.id === scrollintoid"></text>
</template>

这个元素动态绑定id不能触发滚动

html 复制代码
 <template #scroll>
    <text :id="item.id === scrollintoid?'scrollId':''" ></text>
 </template>
js部分

scrollintoid变量·是用于v-if判断是否渲染滚动定位元素,scrollid则是滚动定位元素的固定id,这两个变量最开始置空,这样能保障触发滚动效果

js 复制代码
initData() {
      this.scrollintoid = "";
      this.scrollid = "";
      util.request(api.ListInfo, this.params, "GET").then((res) => {
        if (res.code === 0) {
          this.ListInfo = res.data;
          this.$nextTick(() => {
            setTimeout(() => {
              this.scrollid = "scrollId";
              this.scrollintoid = this.$store.state.scrollId;
            }, 50);
          });
        } else {
          util.showErrorToast(res.msg);
        }
      });
    },

行点击事件,保存点击行的id,返回页面时请求接口能触发滚动

js 复制代码
rowClick(item) {
      this.$store.commit("setScrollId", item.id);
      uni.navigateTo({
        url:
          "/package-pc/pages/choose/choose?id=" +
          item.id,
      });
    },

vuex部分

js 复制代码
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    scrollId: "",
  },
  mutations: {
    setScrollId(state, id) {
      state.scrollId = id;
    },
  },
});
export default store;
后续有时间给uni-ui提提pr吧,或者自己在插件市场发布下
相关推荐
daols881 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue