uniapp列表翻页向上翻滚

最新推荐文章于 2024-04-26 18:26:55 发布
最新推荐文章于 2024-04-26 18:26:55 发布
阅读量63 收藏
点赞数
文章标签： uni-app java 前端 服务器 linux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gh786395613/article/details/133072551
版权

后台接口需要传页码数和每页显示条数，直接上代码

1.页面station.vue

<view class="lcbx">
            <view class="wdz" v-if="records&&records.length==0">
                {{zwsj}}
            </view>
            <view class="wdy" v-for="(item, index) in records" :key="index">
                <view class="smc">
                    <image class="xdi" src="../../static/img/sta/green.png" v-if="item.status==1"></image>
                    <image class="xdi" src="../../static/img/sta/red.png" v-if="item.status==2"></image>
                    <image class="xdi" src="../../static/img/sta/hui.png" v-if="item.status==0"></image>
                    {{item.stationName&&item.stationName.length>20?item.stationName.substr(0,6)+'...'+item.stationName.substr(15,item.stationName.length):item.stationName}}
                    <text class="xiz">({{item.power}}kW)</text>
                </view>
                <view class="scad">
                    <!-- @click="togglePopup('center', 'tip')" -->
                    <view class="fff" @click="deleteStation(item)">
                        <image class="bjaz" src="../../static/img/sta/sca.png"></image>
                    </view>
                    <view class="ddd" @click="edit(item.stationName,item.id)">
                        <image class="bja" src="../../static/img/sta/bja.png"></image>
                    </view>
                </view>
                <view class="">
                    <view class="hx"></view>
                    <view @click="detail(item.stationName,item.id)" class="whh">

                        <view class="mrtd" v-if="item.imageList.length==0">
                            <!-- <image class="mrt" :src="solarUrl+item.image.split(';')[0].substr(item.image.split(';')[0].indexOf('/photo'))"
                             @error="errortt(item,index)" v-if="!imgShow&&!imgShowi"></image> -->
                            <image class="mrt" src="../../static/img/sta/0.png" v-if="imgShow&&item.type==1"></image>
                            <image class="mrt" src="../../static/img/sta/03.png" v-if="imgShowi&&item.type==0"></image>
                        </view>
                        <view class="mrtd" v-if="item.imageList.length>0">
                            <!-- <image class="mrt" :src="solarUrl+item.image.split(';')[0].substr(item.image.split(';')[0].indexOf('/photo'))"
                             @error="errortt(item,index)" v-if="!imgShow&&!imgShowi"></image> -->
                            <image class="mrt" :src="solarUrl+item.imageList[0]"></image>

                            <!-- <image class="mrt" src="../../static/img/sta/03.png" ></image> -->
                        </view>
                        <view :class="locale?fdlden:fdld">
                            <!-- 发电功率 -->
                            <view class="fgl">
                                {{i18n.P_Solar_power}}：
                            </view>
                        </view>
                        <view class="fdzd">
                            <view class="fgz">
                                {{item.pvPower}}<text v-if="item.pvPower==0">.0</text>
                                <text class="kwrw">{{item.pvPowerUnit}}</text>
                            </view>
                        </view>
                        <view :class="locale?cndden:cndd">
                            <view class="fgl">
                                <!-- 储能功率 -->
                                {{i18n.P_Battery_power}}：
                            </view>
                        </view>
                        <view class="cnbdd">
                            <view class="fgz">
                                {{item.packPower}}<text v-if="item.packPower==0">.0</text>
                                <text class="kww">{{item.packPowerUnit}}</text>
                            </view>
                        </view>
                        <view class="bwdd">
                            <view class="fgl">
                                <!-- 并网功率 -->
                                {{i18n.P_Grid_power}}：
                            </view>
                        </view>
                        <view class="bwndd">
                            <view class="fgz">
                                {{item.bwPower}}<text v-if="item.bwPower==0">.0</text>
                                <text class="kww">{{item.bwPowerUnit}}</text>
                            </view>
                        </view>
                        <view class="hexx">
                            <view class="hxr"></view>
                        </view>
                    </view>
                </view>
                <view class="dwdr" @click="detail(item.stationName,item.id)">
                    <view class="drdd">
                        <view class="dsz">
                            <text class="dzr">{{i18n.H_Today}}</text>
                        </view>
                    </view>
                    <view class="gsf">
                        <!-- 光伏发电量 -->
                        <view :class="gfdl">
                            {{i18n.P_Solar_generation}}:<text>\n</text>
                            <text class="gff">
                                {{item.pvOut}}<text v-if="item.pvOut==0">.0</text>
                                <text class="lwh">{{item.pvOutUnit}}</text>
                            </text>
                        </view>
                    </view>
                    <view :class="locale?fsfen:fsf">
                        <!-- 储能充电量 -->
                        <view :class="gfdl">
                            {{i18n.P_Battery_charge}}:<text>\n</text>
                            <text class="gff">
                                {{item.packIn}}<text v-if="item.packIn==0">.0</text>
                                <text class="lwh">{{item.packInUnit}}</text>
                            </text>
                        </view>
                    </view>
                    <view :class="locale?dsfen:dsf">
                        <!-- 并网电量 -->
                        <view :class="gfdldd">
                            {{i18n.P_Grid_sells}}:<text>\n</text>
                            <text class="gff">
                                {{item.gridIn}}<text v-if="item.gridIn==0">.0</text>
                                <text class="lwh">{{item.gridInUnit}}</text>
                            </text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreTexthh}}</view>

2.data(){}里定义变量

data() {
    return {
        records: [],
        recordsRes: [],
        recordsTemp: [], 
        loadMoreText: "",
    　　loadMoreTexthh: "",
    　　showLoadMore: false,
    　　type: '',
    }
},

3.跟data(){}同级定义下拉刷新onPullDownRefresh()和向上翻滚onReachBottom()方法

onPullDownRefresh() {
            this.currentStation = 1
            this.showLoadMore=false
            this.loadMoreTexthh = ""
            this.getStatusCount()
            this.getStations()
            //TODO
            if (this.currentStation * 10 >= this.ttbvvhh) {
                this.loadMoreTexthh = this.$t('index').PD_No_more_data
                this.loadMoreText = ""
                return;
            }
            this.showLoadMore = true;
            // setTimeout(() => {
            //     this.setDateStations();
            // }, 300);

            setTimeout(this.showTabBarRedDot, 1500);
            setTimeout(() => {
                uni.stopPullDownRefresh(); //停止下拉刷新动画
            }, 300)
        },
        onReachBottom() {
            // console.log("========onReachBottom==========");
            // console.log("====this.currentStation=======", this.currentStation)
            // console.log("=====ttbvvhh=======", this.ttbvvhh)

            if (this.currentStation * 10 >= this.ttbvvhh) {

                // "已经全部加载完毕"
                this.loadMoreTexthh = this.$t('index').PD_No_more_data
                this.loadMoreText = ""
                return;
            }
            this.showLoadMore = true;
            setTimeout(() => {
                this.setDateStations();
            }, 300);
        },

 4.methods中定义setDateStations()和getStations()和search()方法

setDateStations() {
                uni.showLoading({
                    title: this.$t('index').P_Loading_data + "..."
                })
                this.currentStation += 1
                uni.request({
                    url: this.provider ? (this.locale ? getApp().globalData.url +
                        '/solar/baseinfo/station/getStations?lang=en-US' :
                        getApp().globalData.url + '/solar/baseinfo/station/getStations?lang=zh-CN') : (this
                        .locale ? getApp().globalData
                        .url + '/app/baseinfo/station/getStations?lang=en-US' : getApp().globalData.url +
                        '/app/baseinfo/station/getStations?lang=zh-CN'),
                    method: 'POST',
                    header: {
                        //'access-token': "aea8cdc9-d0a7-472b-8fe7-bd74f46ce4af"
                        'Authorization': getApp().globalData.accessToken
                    },
                    data: {
                        "current": this.currentStation,
                        "size": this.size,
                        "stationName": this.searchValue.value,
                    },
                    success: (res) => {
                        // console.log(res);
                        // console.log("===res.data=====getStations=====", res.data)
                        if (this.currentStation==1) {
                            this.records = []
                        }
                        // console.log("=========this.searchValue.value======", this.searchValue.value)
                        this.recordsRes = res.data.records
                        this.recordsTemp = this.recordsRes
                        this.recordsTemp.map((el, index) => {
                            var imageListTemp = el.image.split(';')
                            var imageList = []
                            imageListTemp.map((ell, indexx) => {
                                if (ell.length > 3) {
                                    if (ell.indexOf("\"") != -1) {
                                        ell = ell.replace("\"", '')
                                    }
                                    imageList.push(ell)
                                }
                            })
                            // console.log("")
                            this.$set(el, 'imageList', imageList)
                        })
                        this.recordsRes = this.recordsTemp

                        if (res.statusCode == 200) {
                            this.records = this.records.concat(this.recordsRes)
                        }
                        
                        // console.log("====res.statusCode=====", res.statusCode)
                        // console.log("====res=====", res)
                        if (res.statusCode != 200) {
                            uni.showToast({
                                icon: 'none',
                                title: res.data.msg,
                            });
                            this.myToken()
                            this.getStatusCount()
                            this.getStations()
                            // this.myTemp=false
                            // this.myTemp=true
                        }
                        // console.log("======this.records===0===", this.records)
                        uni.hideLoading();
                        setTimeout(() => {
                            uni.stopPullDownRefresh(); //停止下拉刷新动画
                        }, 300)
                    },
                    // complete() {
                    //     uni.hideLoading();
                    // }
                })

            },

getStations() {
                // uni.showLoading({
                //     title: this.$t('index').P_Loading_data + "..."
                // })
                uni.request({
                    url: this.provider ? (this.locale ? getApp().globalData.url +
                        '/solar/baseinfo/station/getStations?lang=en-US' :
                        getApp().globalData.url + '/solar/baseinfo/station/getStations?lang=zh-CN') : (this
                        .locale ? getApp().globalData
                        .url + '/app/baseinfo/station/getStations?lang=en-US' : getApp().globalData.url +
                        '/app/baseinfo/station/getStations?lang=zh-CN'),
                    method: 'POST',
                    header: {
                        //'access-token': "aea8cdc9-d0a7-472b-8fe7-bd74f46ce4af"
                        'Authorization': getApp().globalData.accessToken
                    },
                    data: {
                        "current": 1,
                        "size": this.size,
                        "stationName": this.searchValue.value,
                    },
                    success: (res) => {
                        // console.log(res);
                        // console.log("===res.data=====getStations=====", res.data)
                        this.records = []
                        this.recordsRes = res.data.records
                        this.recordsTemp = this.recordsRes
                        this.recordsTemp.map((el, index) => {
                            var imageListTemp = el.image.split(';')
                            var imageList = []
                            imageListTemp.map((ell, indexx) => {
                                if (ell.length > 3) {
                                    if (ell.indexOf("\"") != -1) {
                                        ell = ell.replace("\"", '')
                                    }
                                    imageList.push(ell)
                                }
                            })
                            this.$set(el, 'imageList', imageList)
                        })
                        this.recordsRes = this.recordsTemp

                        if (res.statusCode == 200) {
                            this.records = this.records.concat(this.recordsRes)
                        }
                        this.ttbvvhh = res.data.total
                        // console.log("======this.records===2===", this.records)
                        if (res.statusCode != 200) {

                        }
                        uni.hideLoading();
                        setTimeout(() => {
                            uni.stopPullDownRefresh(); //停止下拉刷新动画
                        }, 300)
                    },
                    // complete() {
                    //     uni.hideLoading();
                    // }
                })

            },

search(res) {
                // uni.showModal({
                //     content: '搜索：' + res.value,
                //     showCancel: false
                // })
                this.currentStation = 1
                this.showLoadMore=false
                this.loadMoreTexthh = ""
                this.records = []
                uni.showLoading({
                    title: this.$t('index').P_Loading_data + "..."
                })
                // console.log("======this.searchValue==1==", this.searchValue.value)
                uni.request({
                    url: this.provider ? (this.locale ? getApp().globalData.url +
                        '/solar/baseinfo/station/getStations?lang=en-US' :
                        getApp().globalData.url + '/solar/baseinfo/station/getStations?lang=zh-CN') : (this
                        .locale ? getApp().globalData
                        .url + '/app/baseinfo/station/getStations?lang=en-US' : getApp().globalData.url +
                        '/app/baseinfo/station/getStations?lang=zh-CN'),
                    method: 'POST',
                    header: {
                        //'access-token': "aea8cdc9-d0a7-472b-8fe7-bd74f46ce4af"
                        'Authorization': getApp().globalData.accessToken
                    },
                    data: {
                        "current": this.currentStation,
                        "size": this.size,
                        "stationName": this.searchValue.value,
                    },
                    success: (res) => {
                        //console.log(res);
                        //console.log("===res.data=====getStations=====", res.data)
                        // if (this.currentStation==1) {
                        //     this.records = []
                        // }
                        this.loadMoreTexthh = ''
                        this.recordsRes = res.data.records
                        this.recordsTemp = this.recordsRes
                        this.recordsTemp.map((el, index) => {
                            var imageListTemp = el.image.split(';')
                            var imageList = []
                            imageListTemp.map((ell, indexx) => {
                                if (ell.length > 3) {
                                    if (ell.indexOf("\"") != -1) {
                                        ell = ell.replace("\"", '')
                                    }
                                    imageList.push(ell)
                                }
                            })
                            this.$set(el, 'imageList', imageList)
                        })
                        this.recordsRes = this.recordsTemp
                        if (res.statusCode == 200) {
                            this.records = this.records.concat(this.recordsRes)
                        }
                        this.ttbvvhh = res.data.total

                        if (1 * 10 >= this.ttbvvhh) {

                            // "已经全部加载完毕"
                            this.loadMoreTexthh = this.$t('index').PD_No_more_data
                            this.showLoadMore = true;
                        }
                        
                        if(this.ttbvvhh==0){
                            this.showLoadMore = false
                        }
                    },
                    complete() {
                        uni.hideLoading();
                        setTimeout(() => {
                            uni.stopPullDownRefresh(); //停止下拉刷新动画
                        }, 300)
                    }
                })
            },
gh786395613
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue 列表内容自动向上滚动_原生JS实现列表内容自动向上滚动效果
weixin_39548805的博客
12-19 1135
效果展示(鼠标移入，滚动停止；鼠标移出，滚动继续)实现原理1. html结构：核心是ul > li，ul外层包裹着div。因为想要内容循环滚动无缝衔接，所以在原有ul后面还要有一个一样内容的ul。如下图：(红色边框为可视区域div，此处为了方便查看效果去除overflow:hidden；)2. 样式方面：由于要滚动，所以必须2个ul的高度 > 外层可视div高度，且div必须设置ove...
JQuery 图片不断向上翻滚代码
06-01
JS实现不断向上翻滚代码，翻滚内容支持图文并茂，效果很不错.
js数据向上翻滚_数据滚动
10-30
方便做一些问题提交等宣传效果，多用于文字滚动
uni-app 微信小程序如果做上拉分页效果
w161513820的博客
12-31 741
在对多条数据的时候如何去做翻页的效果呢，主要是利用到生命周期中的onReachBottom，当下拉到底的时候就会触发这个生命周期。接口中对于传递给后台的页码就可以动态的去传参就行了，举例：这是我的接口方法 data() { return { UserFoot: [], page:1, // 页码 } }, methods: { //用户足迹 getUserFoot(pages) { let _this = this // sho
uniapp---app滑动翻页（上滑、下滑、左滑、右滑）
maidu_xbd的博客
11-29 8337
（1）为页面绑定【touchstart】【touchend】事件 <template> <view class="home" @touchstart="start" @touchend="end"> //....... </view> </template> （2）js部分 <script> export default { data() { return { startData: { cli
uniapp返回上一页执行上一页方法
BUG_Jia
02-06 3421
进入了一个列表页，列表页进入详情页，在详情页进行了一些操作，比如，删除，修改，编辑，提交，成功之后返回到列表页，那么这个时候，如果我们的列表页不进行数据的刷新，就会给用户一种错觉，我刚才进行操作的那条数据会不会没成功，我们下拉刷新下列表，这个数据就变成最新的了，这个是很常见的一个交互场景，那么如何不让用户进行下拉刷新或者重新进入列表页的操作，我提供几种比较常用的做法！需要注意的一点是，需要在页面卸载的周期内，把自定义的事件off掉。第三种方法是前二种都不能用的情况下使用，不是很推荐使用。
vue 列表内容自动向上滚动_vue实现文字上下滚动
weixin_35182419的博客
01-30 1424
实现文字的上下滚动使用positon的relative的top属性，通过动态改变top来实现相关内容的更换，通过transion来实现相关的动画效果，相关的dom内容{{"第"+item+"条数据"}}{{"第"+list[0]+"条数据"}}hello相关css内容img{width: 30px;height: 30px;border-radius: 50%;vertical-align: mi...
图片间断向上翻滚
03-02
图片向上间断翻滚，先快后慢，滚动一屏后暂停，暂停时间可自行修改
163k首页向上翻滚图片特效
03-17
163k首页向上翻滚图片特效 本人声明：杜绝垃圾文件的存在，请各用户放心下载。
【uniapp/ucharts】采用 uniapp 框架的 h5 应用使用 ucharts（没有 uni_modules）
花间半盘棋
04-26 115
然后按照图片中 README 所写的方式在项目中进行导入；下载的文件是如图所示的路径；就可以正常显示图表啦。
UniApp 项目中的生命周期详解：从诞生到逝去
weixin_47238919的博客
04-22 476
通过本文的介绍，相信你对 UniApp 中的生命周期有了更加深入的理解。合理利用生命周期钩子函数可以更好地管理应用程序的状态和行为，从而提升应用的用户体验和开发效率。
uniapp 页面滚动到指定位置的方法
--=
04-23 248
uniapp 页面滚动到指定位置的方法
从零开始：UniApp 项目搭建指南
weixin_47238919的博客
04-22 439
通过本文的指南，相信你已经对如何搭建一个 UniApp 项目有了更加清晰的认识。UniApp 的跨平台特性为移动应用开发带来了全新的可能性，希望你能够在未来的项目中充分发挥其优势，创造出更加优秀的应用作品。
使用uni-app开发app时遇到mqtt.js不可用的问题
Alan_Walker688的博客
04-24 792
使用uni-app开发app时遇到mqtt.js不可用的问题踩坑与记录。
UniApp状态管理：从深入理解到灵活运用
weixin_47238919的博客
04-22 603
在UniApp中，状态管理是指管理应用程序中各种数据的方法。这些数据可以是用户信息、应用配置、页面状态等。良好的状态管理能够使应用程序的数据流动更加清晰、可控，从而提升应用的性能和用户体验。本文从理论到实践，从基础到高级，全面介绍了UniApp中的状态管理。希望通过本文的阅读，读者能够更加深入地理解状态管理的重要性，并能够在实际开发中灵活运用状态管理的技巧。
【声网】实现web端与uniapp微信小程序端音视频互动
最新发布
xiaotangyu7dong的博客
04-26 791
利用声网实现音视频互动。
优雅实现uniapp返回上一页传参
meteorites的博客
04-26 155
优雅实现uniapp返回上一页传参
关于uniapp编译小程序出现报错:Component “组件路径“ does not have a method “__e“ to handle event
技术应让更广泛的人群流入到实际产品开发中才是正统
04-26 146
首先不要怀疑官方的框架问题,如果框架有问题这么基础的早就修复了。
Uni-App 生命周期
sodakii的博客
04-20 361
这些生命周期函数可以在页面或组件中定义，用于在特定阶段执行相应的操作。
u3d实现滑动无限翻滚列表
06-10
要实现滑动无限翻滚列表，可以使用Unity中的UGUI组件和C#代码实现。以下是一些基本步骤： 1. 创建一个空的UI Canvas，然后在Canvas中创建一个ScrollView和一个Content对象。将Content的锚点设置为(0,1)并调整其大小以适合ScrollView。 2. 在Content中创建一个垂直布局组件（VerticalLayoutGroup），然后为每个列表项创建一个子对象。将列表项的高度设置为与Content相同，并在每个列表项中添加所需的UI元素。 3. 创建一个C#脚本，将其附加到Content对象上。在脚本中，创建一个列表项数组，并在Start方法中将其初始化为列表项的数量。然后，使用ScrollRect组件的onValueChanged事件来检测滑动的位置，并根据需要从列表项数组的前面或后面添加/删除列表项以实现无限滚动效果。 这是一个基本的实现思路，具体的实现细节取决于你的具体需求和UI设计。希望这可以帮助你开始实现你的滑动无限翻滚列表！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gh786395613

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值