Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5977
Star 89
Fork 162
H
hello uni-app x

体验新版 GitCode，发现更多精彩内容 >>

提交 7e051ee6 编写于 作者: 雪洛's avatar 雪洛
浏览文件
操作

feat: 放开web端list-view相关示例

上级 65733dbb
隐藏空白更改
内联 并排
Showing with 87 addition and 92 deletion
pages.json
浏览文件 @ 7e051ee6
......@@ -50,7 +50,6 @@
"navigationBarTitleText": "swiper"
}
},
// #ifdef APP
{
"path": "pages/component/list-view/list-view",
"style": {
......@@ -63,6 +62,14 @@
"navigationBarTitleText": "list-view-multiplex"
}
},
{
"path" : "pages/component/list-view/list-view-multiplex-input",
"style" :
{
"navigationBarTitleText" : "list-view复用input",
"enablePullDownRefresh" : false
}
},
{
"path": "pages/component/list-view/list-view-multiplex-video",
"style": {
......@@ -75,6 +82,7 @@
"navigationBarTitleText": "list-view-children-in-slot"
}
},
// #ifdef APP
{
"path": "pages/component/sticky-section/sticky-section",
"style": {
......@@ -1032,8 +1040,7 @@
"style": {
"navigationBarTitleText": "模板"
}
},
// #ifdef APP
},
{
"path": "pages/template/list-news/list-news",
"style": {
......@@ -1045,8 +1052,7 @@
"style": {
"navigationBarTitleText": "详情示例"
}
},
// #endif
},
{
"path": "pages/template/drop-card/drop-card",
"style": {
......@@ -1097,8 +1103,7 @@
"style": {
"navigationBarTitleText": "半屏弹窗"
}
},
// #ifdef APP
},
{
"path": "pages/template/long-list/long-list",
"style": {
......@@ -1112,8 +1117,7 @@
"navigationBarTitleText": "顶部banner长列表",
"enablePullDownRefresh": true
}
},
// #endif
},
{
"path": "pages/template/pull-zoom-image/pull-zoom-image",
"style": {
......@@ -1190,14 +1194,6 @@
"navigationBarTitleText": "权限申请监听",
"enablePullDownRefresh": false
}
},
{
"path" : "pages/component/list-view/list-view-multiplex-input",
"style" :
{
"navigationBarTitleText" : "list-view复用input",
"enablePullDownRefresh" : false
}
}
// #endif
],
......
pages/component/list-view/list-view-multiplex.uvue
浏览文件 @ 7e051ee6
......@@ -43,7 +43,7 @@
//延时显示list-view 测试list-item延时显示bug
setTimeout(()=>{
this.list_show = !this.list_show
}, 400)
}, 4000)
},
switchItemContent() {
this.displayArrow = !this.displayArrow
......
pages/tabBar/component.uvue
浏览文件 @ 7e051ee6
......@@ -77,11 +77,10 @@
enable: false
},
*/
// #ifdef APP
// TODO web 实现list-view
{
name: 'list-view',
},
// #ifdef APP
{
name: 'sticky-header',
},
......
pages/tabBar/template.uvue
浏览文件 @ 7e051ee6
......@@ -54,8 +54,7 @@
export default {
data() {
return {
list: [
// #ifdef APP
list: [
{
id: 'long-list',
url: 'long-list',
......@@ -79,8 +78,7 @@
name: '列表到详情',
open: false,
pages: [] as Page[],
},
// #endif
},
{
id: 'scroll-fold-nav',
url: 'scroll-fold-nav',
......
pages/template/list-news/list-news.uvue
浏览文件 @ 7e051ee6
......@@ -4,7 +4,8 @@
<list-item class="banner" @click="bannerClick(banner)" type=1>
<image class="banner-img" :src="banner.cover"></image>
<text class="banner-title">{{ banner.title }}</text>
</list-item>
</list-item>
<!-- #ifdef APP -->
<sticky-header>
<view
style="width: 100%;height:44px;background-color: #f5f5f5;flex-direction: row;justify-content:center;align-items:center;">
......@@ -12,7 +13,8 @@
{{name}}
</text>
</view>
</sticky-header>
</sticky-header>
<!-- #endif -->
<list-item v-for="(value, index) in listData" :key="index" type=2>
<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
<view class="uni-media-list">
......
pages/template/long-list/long-list-page.uvue
浏览文件 @ 7e051ee6
......@@ -70,7 +70,7 @@
dataList: [] as ListItem[],
isEnded: false,
loadingError: '',
$currentPage: 1
currentPage: 1
}
},
computed: {
......@@ -94,7 +94,7 @@
methods: {
refreshData(loadComplete : (() => void) | null) {
this.dataList.length = 0
this.$currentPage = 1
this.currentPage = 1
this.loadData(loadComplete)
},
loadData(loadComplete : (() => void) | null) {
......@@ -107,7 +107,7 @@
url: SERVER_URL,
data: {
type: this.type,
page: this.$currentPage,
page: this.currentPage,
page_size: PAGE_SIZE
},
success: (res) => {
......@@ -121,7 +121,7 @@
if (responseData.data.length == 0) {
this.isEnded = true
} else {
this.$currentPage++
this.currentPage++
}
},
fail: (err) => {
......
pages/template/long-list/long-list.uvue
浏览文件 @ 7e051ee6
......@@ -79,21 +79,21 @@
} as SwiperViewItem
] as SwiperViewItem[],
swiperIndex: -1,
$pageScrollView: null as null | UniElement,
$headerHeight: 0,
$animationFinishIndex: 0,
$tabScrollView: null as null | UniElement,
$indicatorNode: null as null | UniElement,
$swiperWidth: 0,
$swiperTabsRect: [] as SwiperTabsItem[]
pageScrollView: null as null | UniElement,
headerHeight: 0,
animationFinishIndex: 0,
tabScrollView: null as null | UniElement,
indicatorNode: null as null | UniElement,
swiperWidth: 0,
swiperTabsRect: [] as SwiperTabsItem[]
}
},
onReady() {
this.$pageScrollView = this.$refs['pageScrollView'] as UniElement;
this.$headerHeight = (this.$refs['header'] as UniElement).offsetHeight
this.$swiperWidth = (this.$refs['swiper'] as UniElement).getBoundingClientRect().width
this.$tabScrollView = this.$refs['tabScroll'] as UniElement
this.$indicatorNode = this.$refs['indicator'] as UniElement
this.pageScrollView = this.$refs['pageScrollView'] as UniElement;
this.headerHeight = (this.$refs['header'] as UniElement).offsetHeight
this.swiperWidth = (this.$refs['swiper'] as UniElement).getBoundingClientRect().width
this.tabScrollView = this.$refs['tabScroll'] as UniElement
this.indicatorNode = this.$refs['indicator'] as UniElement
this.cacheTabItemsSize()
this.setSwiperIndex(0, true)
},
......@@ -109,28 +109,28 @@
},
onNestedPreScroll(event : NestedPreScrollEvent) {
const deltaY = event.deltaY
const scrollTop = this.$pageScrollView!.scrollTop
const scrollTop = this.pageScrollView!.scrollTop
// 优先处理父容器滚动，父容器不能滚动时滚动子
if (deltaY > 0) {
// 向上滚动，如果父容器 header scrollTop < offsetHeight，先滚动父容器
if (scrollTop < this.$headerHeight) {
const difference = this.$headerHeight - scrollTop - deltaY
if (scrollTop < this.headerHeight) {
const difference = this.headerHeight - scrollTop - deltaY
if (difference > 0) {
this.$pageScrollView!.scrollBy(event.deltaX, deltaY)
this.pageScrollView!.scrollBy(event.deltaX, deltaY)
event.consumed(event.deltaX, deltaY)
} else {
const top : number = deltaY + difference
event.consumed(event.deltaX, top.toFloat())
this.$pageScrollView!.scrollBy(event.deltaX, top.toFloat())
this.pageScrollView!.scrollBy(event.deltaX, top.toFloat())
}
}
} else if (deltaY < 0) {
// 向下滚动，如果父容器 scrollTop > 0，通知子被父容器消耗，然后滚动到 0
if (scrollTop > 0) {
event.consumed(event.deltaX, deltaY)
this.$pageScrollView!.scrollBy(event.deltaX, deltaY)
this.pageScrollView!.scrollBy(event.deltaX, deltaY)
}
}
},
......@@ -146,9 +146,9 @@
const offset_x = e.detail.dx
// 计算当前索引并重置差异
const current_offset_x = offset_x % this.$swiperWidth
const current_offset_i = offset_x / this.$swiperWidth
const current_index = this.$animationFinishIndex + parseInt(current_offset_i + '')
const current_offset_x = offset_x % this.swiperWidth
const current_offset_i = offset_x / this.swiperWidth
const current_index = this.animationFinishIndex + parseInt(current_offset_i + '')
// 计算目标索引及边界检查
let move_to_index = current_index
......@@ -159,7 +159,7 @@
}
// 计算偏移百分比
const percentage = Math.abs(current_offset_x) / this.$swiperWidth
const percentage = Math.abs(current_offset_x) / this.swiperWidth
// 通知更新指示线
this.updateTabIndicator(current_index, move_to_index, percentage)
......@@ -169,14 +169,14 @@
},
onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
this.setSwiperIndex(e.detail.current, true)
this.$animationFinishIndex = e.detail.current
console.log('this.$animationFinishIndex', e.detail.current);
this.animationFinishIndex = e.detail.current
console.log('this.animationFinishIndex', e.detail.current);
},
cacheTabItemsSize() {
this.$swiperTabsRect.length = 0
this.swiperTabsRect.length = 0
const tabs = this.$refs["swipertab"] as UniElement[]
tabs.forEach((node) => {
this.$swiperTabsRect.push({
this.swiperTabsRect.push({
x: node.offsetLeft,
w: node.offsetWidth
} as SwiperTabsItem)
......@@ -196,8 +196,8 @@
}
},
updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
const current_size = this.$swiperTabsRect[current_index]
const move_to_size = this.$swiperTabsRect[move_to_index]
const current_size = this.swiperTabsRect[current_index]
const move_to_size = this.swiperTabsRect[move_to_index]
// 计算指示线 左边距 和 宽度 在移动过程中的线性值
const indicator_line_x = lerpNumber(current_size.x, move_to_size.x, percentage)
......@@ -205,12 +205,12 @@
// 更新指示线
const x = indicator_line_x + indicator_line_w / 2
this.$indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
this.indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
// 滚动到水平中心位置
const scroll_x = x - this.$swiperWidth / 2
if(this.$tabScrollView !== null){
this.$tabScrollView!.scrollLeft = scroll_x
const scroll_x = x - this.swiperWidth / 2
if(this.tabScrollView !== null){
this.tabScrollView!.scrollLeft = scroll_x
}
},
initSwiperItemData(index : number) {
......
pages/template/long-list2/long-list2.uvue
浏览文件 @ 7e051ee6
......@@ -89,22 +89,22 @@
} as SwiperViewItem
] as SwiperViewItem[],
swiperIndex: -1,
$pageScrollView: null as null | UniElement,
$headerHeight: 0,
$animationFinishIndex: 0,
$tabScrollView: null as null | UniElement,
$indicatorNode: null as null | UniElement,
$swiperWidth: 0,
$swiperTabsRect: [] as SwiperTabsItem[],
pageScrollView: null as null | UniElement,
headerHeight: 0,
animationFinishIndex: 0,
tabScrollView: null as null | UniElement,
indicatorNode: null as null | UniElement,
swiperWidth: 0,
swiperTabsRect: [] as SwiperTabsItem[],
nestedScrollChildId: ""
}
},
onReady() {
this.$pageScrollView = this.$refs['pageScrollView'] as UniElement;
this.$headerHeight = (this.$refs['header'] as UniElement).offsetHeight
this.$swiperWidth = (this.$refs['swiper'] as UniElement).getBoundingClientRect().width
this.$tabScrollView = this.$refs['tabScroll'] as UniElement
this.$indicatorNode = this.$refs['indicator'] as UniElement
this.pageScrollView = this.$refs['pageScrollView'] as UniElement;
this.headerHeight = (this.$refs['header'] as UniElement).offsetHeight
this.swiperWidth = (this.$refs['swiper'] as UniElement).getBoundingClientRect().width
this.tabScrollView = this.$refs['tabScroll'] as UniElement
this.indicatorNode = this.$refs['indicator'] as UniElement
this.cacheTabItemsSize()
this.setSwiperIndex(0, true)
},
......@@ -120,19 +120,19 @@
},
onNestedPreScroll(event : NestedPreScrollEvent) {
const deltaY = event.deltaY
const scrollTop = this.$pageScrollView!.scrollTop
const scrollTop = this.pageScrollView!.scrollTop
if (deltaY > 0) {
// 向上滚动，如果父容器 header scrollTop < offsetHeight，先滚动父容器
if (scrollTop < this.$headerHeight) {
const difference = this.$headerHeight - scrollTop - deltaY
if (scrollTop < this.headerHeight) {
const difference = this.headerHeight - scrollTop - deltaY
if (difference > 0) {
this.$pageScrollView!.scrollBy(event.deltaX, deltaY)
this.pageScrollView!.scrollBy(event.deltaX, deltaY)
event.consumed(event.deltaX, deltaY)
} else {
const top : number = deltaY + difference
event.consumed(event.deltaX, top.toFloat())
this.$pageScrollView!.scrollBy(event.deltaX, top.toFloat())
this.pageScrollView!.scrollBy(event.deltaX, top.toFloat())
}
}
}
......@@ -149,9 +149,9 @@
const offset_x = e.detail.dx
// 计算当前索引并重置差异
const current_offset_x = offset_x % this.$swiperWidth
const current_offset_i = offset_x / this.$swiperWidth
const current_index = this.$animationFinishIndex + parseInt(current_offset_i + '')
const current_offset_x = offset_x % this.swiperWidth
const current_offset_i = offset_x / this.swiperWidth
const current_index = this.animationFinishIndex + parseInt(current_offset_i + '')
// 计算目标索引及边界检查
let move_to_index = current_index
......@@ -162,7 +162,7 @@
}
// 计算偏移百分比
const percentage = Math.abs(current_offset_x) / this.$swiperWidth
const percentage = Math.abs(current_offset_x) / this.swiperWidth
// 通知更新指示线
this.updateTabIndicator(current_index, move_to_index, percentage)
......@@ -172,13 +172,13 @@
},
onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
this.setSwiperIndex(e.detail.current, true)
this.$animationFinishIndex = e.detail.current
this.animationFinishIndex = e.detail.current
},
cacheTabItemsSize() {
this.$swiperTabsRect.length = 0
this.swiperTabsRect.length = 0
const tabs = this.$refs["swipertab"] as UniElement[]
tabs.forEach((node) => {
this.$swiperTabsRect.push({
this.swiperTabsRect.push({
x: node.offsetLeft,
w: node.offsetWidth
} as SwiperTabsItem)
......@@ -198,8 +198,8 @@
}
},
updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
const current_size = this.$swiperTabsRect[current_index]
const move_to_size = this.$swiperTabsRect[move_to_index]
const current_size = this.swiperTabsRect[current_index]
const move_to_size = this.swiperTabsRect[move_to_index]
// 计算指示线 左边距 和 宽度 在移动过程中的线性值
const indicator_line_x = lerpNumber(current_size.x, move_to_size.x, percentage)
......@@ -207,12 +207,12 @@
// 更新指示线
const x = indicator_line_x + indicator_line_w / 2
this.$indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
this.indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
// 滚动到水平中心位置
const scroll_x = x - this.$swiperWidth / 2
if(this.$tabScrollView !== null){
this.$tabScrollView!.scrollLeft = scroll_x
const scroll_x = x - this.swiperWidth / 2
if(this.tabScrollView !== null){
this.tabScrollView!.scrollLeft = scroll_x
}
},
initSwiperItemData(index : number) {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或