零食网站建设前的市场分析,网页升级访问紧急大通知狼,·温州公司建设网站,济南做seo排名需求#xff1a;实现双击表格行跳转详情编辑页面#xff0c;编辑完返回时定位到之前选择的表格行
1.修改了uniapp官方组件库uni-table中的uni-tr的源码#xff0c;添加click事件#xff0c;添加slot namescroll/slot插槽 blocksl…需求实现双击表格行跳转详情编辑页面编辑完返回时定位到之前选择的表格行
1.修改了uniapp官方组件库uni-table中的uni-tr的源码添加click事件添加slot namescroll/slot插槽 blockslot namescroll/slotviewclassuni-table-trclickrowClick:class{ is-active: isActive }viewv-ifselection selectionclasscheckbox:class{ tr-table--border: border, checkbox-head: isHeadTr }table-checkbox:checkedchecked:indeterminateindeterminate:disableddisabledcheckboxSelectedcheckboxSelected/table-checkbox/viewslot/slot/view/block添加slot namescroll/slot插槽的目的是搭配scroll-view标签与其scroll-into-view属性用于渲染滚动定位元素实现滚动定位 template/ 和 block/并不是一个组件它们仅仅是一个包装元素不会在页面中做任何渲染只接受控制属性。 但实际使用中发现template/ 做包装元素会提示编译错误使用 block/则很正常
模拟双击效果 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属性实现滚动定位 templatescroll-view scroll-ytrue classscroll :scroll-into-viewscrollidview classtable-contentuni-tablereftable2stripeemptyText暂无更多数据classtable-contenttypeselectionselection-changeselectionChange2uni-tr isHeadTrtrueuni-th aligncenter width80序号/uni-thuni-th aligncenter width150计划开始时间/uni-thuni-th aligncenter width150计划结束时间/uni-th/uni-truni-trv-for(item, index) in listDataSucess:keyitem.idrowClickrowClick(item):is-activeitem.id scrollintoidtemplate #scrolltext idscrollId v-ifitem.id scrollintoid/text/templateuni-td aligncenterview{{ index 1 }}/view/uni-tduni-td aligncenter{{ item.kssj ? item.kssj : }}/uni-tduni-td aligncenter{{ item.jssj ? item.jssj : }}/uni-td/uni-tr/uni-table/view/scroll-view
/templatescroll-into-view需要提供滚动到的元素的idscroll-into-view可以动态绑定id:scroll-into-viewscrollid但是滚动到元素的id不能动态绑定所以只能通过v-if渲染这个元素
通过v-if渲染这个元素能触发滚动
template #scrolltext idscrollId v-ifitem.id scrollintoid/text
/template这个元素动态绑定id不能触发滚动 template #scrolltext :iditem.id scrollintoid?scrollId: /text/templatejs部分
scrollintoid变量·是用于v-if判断是否渲染滚动定位元素scrollid则是滚动定位元素的固定id这两个变量最开始置空这样能保障触发滚动效果
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返回页面时请求接口能触发滚动
rowClick(item) {this.$store.commit(setScrollId, item.id);uni.navigateTo({url:/package-pc/pages/choose/choose?id item.id,});},vuex部分
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吧或者自己在插件市场发布下
