提交 577b523a 编写于 作者: shutao-dc's avatar shutao-dc

add long-waterflow-nested

上级 863f48e8
...@@ -2215,7 +2215,7 @@ ...@@ -2215,7 +2215,7 @@
} }
}, },
{ {
"path": "pages/template/long-grid-nested/long-grid-nested", "path": "pages/template/long-waterflow-nested/long-waterflow-nested",
"style": { "style": {
"navigationBarTitleText": "顶部banner瀑布流长列表嵌套滚动示例", "navigationBarTitleText": "顶部banner瀑布流长列表嵌套滚动示例",
"enablePullDownRefresh": true "enablePullDownRefresh": true
...@@ -3353,4 +3353,4 @@ ...@@ -3353,4 +3353,4 @@
] ]
} }
] ]
} }
\ No newline at end of file
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
}, },
{ {
name: '顶部banner瀑布流长列表(嵌套滚动)', name: '顶部banner瀑布流长列表(嵌套滚动)',
url: 'long-grid-nested' url: 'long-waterflow-nested'
}, },
// #endif // #endif
{ {
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</template> </template>
<script> <script>
import longPage from './long-grid-page.uvue'; import longPage from './long-waterflow-page.uvue';
type SwiperTabsItem = { type SwiperTabsItem = {
x : number, x : number,
......
<template> <template>
<grid-view :id="id" class="grid" :rebound="false" :scroll-y="true" :custom-nested-scroll="true" <waterflow :id="id" class="grid" :rebound="false" :scroll-y="true" :custom-nested-scroll="true"
main-axis-gap="8px" cross-axis-gap="8px" cross-axis-count=2 main-axis-gap="8px" cross-axis-gap="8px" cross-axis-count=2
@scrolltolower="loadData(null)" associative-container="nested-scroll-view"> @scrolltolower="loadData(null)" associative-container="nested-scroll-view">
<grid-item class="grid-item" v-for="(item, _) in datagrid" :key="item.plugin_id" type=1> <flow-item class="flow-item" v-for="(item, _) in datagrid" :key="item.plugin_id" type=1>
<view class="grid-item-icon"> <view class="flow-item-icon">
<image class="grid-item-icon-image" :src="item.plugin_img_link" mode="aspectFit"></image> <image class="flow-item-icon-image" :src="item.plugin_img_link" mode="aspectFit"></image>
</view> </view>
<view class="grid-item-fill"> <view class="flow-item-fill">
<view class="flex-row"> <view class="flex-row">
<text class="title">{{item.plugin_name}}</text> <text class="title">{{item.plugin_name}}</text>
</view> </view>
...@@ -25,18 +25,18 @@ ...@@ -25,18 +25,18 @@
<text class="update-date-value">{{item.update_date}}</text> <text class="update-date-value">{{item.update_date}}</text>
</view> </view>
</view> </view>
</grid-item type="20"> </flow-item type="20">
<grid-item slot="load-more" class="loading" type=6> <flow-item slot="load-more" class="loading" type=6>
<uni-loading :loading="loading" color="#999" :text="loadingText"></uni-loading> <uni-loading :loading="loading" color="#999" :text="loadingText"></uni-loading>
</grid-item> </flow-item>
</grid-view> </waterflow>
</template> </template>
<script> <script>
const SERVER_URL = "https://unidemo.dcloud.net.cn/plugin/uniappx-plugin-list" const SERVER_URL = "https://unidemo.dcloud.net.cn/plugin/uniappx-plugin-list"
const PAGE_SIZE = 10; // 最大值 10 const PAGE_SIZE = 10; // 最大值 10
type gridItem = { type flowItem = {
plugin_id : number, plugin_id : number,
plugin_img_link : string, plugin_img_link : string,
plugin_name : string, plugin_name : string,
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
type ResponseDataType = { type ResponseDataType = {
code : number, code : number,
data : gridItem[] data : flowItem[]
} }
export default { export default {
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
data() { data() {
return { return {
loading: false, loading: false,
datagrid: [] as gridItem[], datagrid: [] as flowItem[],
isEnded: false, isEnded: false,
loadingError: '', loadingError: '',
currentPage: 1 currentPage: 1
...@@ -170,21 +170,21 @@ ...@@ -170,21 +170,21 @@
background-color: #f7f7f7; background-color: #f7f7f7;
} }
.grid-item { .flow-item {
flex-direction: column; flex-direction: column;
border-radius: 5px; border-radius: 5px;
background-color: #ffffff; background-color: #ffffff;
} }
.grid-item-icon { .flow-item-icon {
position: relative; position: relative;
} }
.grid-item-icon-image { .flow-item-icon-image {
width: 100%; width: 100%;
} }
.grid-item-fill { .flow-item-fill {
flex: 1; flex: 1;
padding: 5px; padding: 5px;
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册