微信小程序---上拉/下拉获取信息组件
2024-07-04 12:39:38
1. 前端
1.1 app.json配置(默认不支持下拉)
局部配置，如果想全局都可以下拉，那配置在全局的app.json即可
{"enablePullDownRefresh": true
}1.1 html
<!-- 表面信息 --><view class="index_item" wx:for="{{ index_data_list }}" wx:key="index"><navigator url="/pages/inside/inside?id={{ item.id }}"> <text>用户：{{ item.nickName }}</text> </navigator><text>内容：{{ item.content }}</text><text>话题：{{ item.topic }} </text><text>发布时间：{{ item.update_time }}</text></view>1.2 js
// pages/index/index.js
var api = require('../../config/app')
Page({/*** 页面的初始数据*/data: {index_data_list: [],MinId: 0,MaxId: 0},/*** 生命周期函数--监听页面加载*/initMessage: function () {wx.request({url: api.IndexAPI,dataType: "json",method: "GET",success: (res) => {this.setData({index_data_list: res.data,MinId: res.data[res.data.length - 1].id,MaxId: res.data[0].id})},})},onLoad: function (options) {this.initMessage();},* 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {this.pullData(true);},pullData: function (status) {if (!status) {wx.request({url: api.IndexAPI,data: {min_id: this.data.MinId},dataType: "json",method: "GET",success: (result) => {// console.log(result.data)if (result.data.length > 0) {this.setData({index_data_list: this.data.index_data_list.concat(result.data),MinId: result.data[result.data.length - 1].id,MaxId: result.data[0].id})} else {wx.showToast({title: '到底部啦',icon: "none"})return}},})} else {wx.request({url: api.IndexAPI,data: {max_id: this.data.MaxId},dataType: "json",method: "GET",success: (result) => {// console.log(result.data)var new_list = result.data.reverse() // 数据是正向的if (new_list.length > 0) {this.setData({index_data_list: new_list.concat(this.data.index_data_list),MinId: new_list[new_list.length - 1].id,MaxId: new_list[0].id})} else {wx.showToast({title: '无最新动态',icon: "none"})return}},})}},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {// this.pullData(false);},})2. 后端
2.1 url
# 首页内容path('index/data/', views.IndexDataListAPIView.as_view()),2.2 view
from rest_framework.generics import ListAPIView, CreateAPIView, RetrieveAPIView
from utils.private import filters, pagination
from .serislizer import IndexDataModelSerializerclass IndexDataListAPIView(ListAPIView):"""首页展示信息"""queryset = models.Release.objects.filter(is_show=True, is_delete=False).order_by('-id')serializer_class = IndexDataModelSerializerfilter_backends = [filters.MaxFilterBackend, filters.MinFilterBackend]pagination_class = pagination.DataLimitPagination2.3 filter
from rest_framework.filters import BaseFilterBackendclass MinFilterBackend(BaseFilterBackend):"""前端传:min_id/max_id"""def filter_queryset(self, request, queryset, view):# 给视图类的queryset，添加新的条件# 就是我们在类里面配置的# queryset=models.Release.objects.filter(is_show=True, is_delete=False).order_by('-id')min_id = request.query_params.get('min_id')print(min_id)if min_id:return queryset.filter(id__lt=min_id).order_by('-id')return querysetclass MaxFilterBackend(BaseFilterBackend):def filter_queryset(self, request, queryset, view):max_id = request.query_params.get('max_id')if max_id:return queryset.filter(id__gt=max_id).order_by('id')return queryset2.4 page
from rest_framework.pagination import LimitOffsetPagination
from rest_framework.response import Responseclass DataLimitPagination(LimitOffsetPagination):"""本质上帮助我们进行切片的处理：[0:N]"""default_limit = 10 # 默认返回数据max_limit = 50 # 最大返回数据limit_query_param = 'limit' # 前端查询的参数offset_query_param = 'offset'# offset 偏移数 GET http://127.0.0.1/four/students/?limit=100&offset=400 从下标为400的记录开始，取100条记录def get_offset(self, request):# 重写偏移数，修改成0return 0def get_paginated_response(self, data):# 修改返回的界面，把多余的去掉，比如总数据,上一页/下一页return Response(data)
2.5 serializer
class IndexDetailDataModelSerializer(serializers.ModelSerializer):"""首页的详情页返回的数据"""topic = serializers.CharField(source='topic.name')nickName = serializers.CharField(source='userinfo.nickName')class Meta:model = models.Releasefields = ['id', 'position', 'content', 'topic', 'nickName', 'update_time', 'msg_url']2.6 models
class Release(BaseModel):"""发布"""position = models.CharField(verbose_name='位置', max_length=225, blank=True, null=True)content = models.CharField(verbose_name='内容', max_length=225)fucking_great = models.CharField(verbose_name='点赞', default=0, max_length=666)watch_num = models.CharField(verbose_name='观看人数', default=0, max_length=666)comment = models.ForeignKey(verbose_name='评论', to='self', on_delete=models.DO_NOTHING, db_constraint=False,null=True, blank=True, related_name='release')# db_constraint=False db_constraint=False 逻辑上的关联，实质上没有外键联系，增删不会受外键影响，orm查询不影响userinfo = models.ForeignKey(verbose_name='用户', to='UserInfo', on_delete=models.DO_NOTHING, db_constraint=False)topic = models.ForeignKey(verbose_name='话题', to='Topic', on_delete=models.DO_NOTHING, db_constraint=False)# 图片链接拼接@propertydef cover_msg_url(self):# 每一个对象走一遍msg_url = self.media.all().filter(is_show=True, is_delete=False).first().cosUrl# print(msg_url)return msg_url# 图片链接拼接@propertydef msg_url(self):msg_url = self.media.all().filter(is_show=True, is_delete=False).values('cosUrl')return msg_urlclass Media(BaseModel):name = models.CharField(verbose_name='名称', max_length=225, blank=True, null=True)choice_type = ((1, "无"),(2, "图片"),(3, "视频"),)type = models.SmallIntegerField(verbose_name='类型', default=1)cosUrl = models.CharField(verbose_name='路径', max_length=225, blank=True, null=True)release = models.ForeignKey(verbose_name='发布', to='Release', related_name='media', on_delete=models.DO_NOTHING,db_constraint=False,null=True, blank=True)cosETag = models.CharField(verbose_name='校验信息', max_length=225, blank=True, null=True)cos_media_name = models.CharField(verbose_name='cos图片名称，删除使用', max_length=225, default='1.png')class Topic(BaseModel):"""话题"""name = models.CharField(verbose_name='话题名称', max_length=225)people_num = models.BigIntegerField(verbose_name='关注人数')class Meta:verbose_name = "话题"verbose_name_plural = "话题"微信小程序---上拉/下拉获取信息组件相关推荐
- 微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
- 微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件 微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
- 微信小程序之select下拉框
wxml: <view class="classify-kuangjia"><view class="classify-kuangjia2"& ...
- 微信小程序订单页面下拉刷新上拉分页加载
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 效果图: 代码: json代码: {"enablePullDownRefresh" ...
- 微信小程序页面事件 - 下拉刷新与上拉触底
一.下拉刷新 1.概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为. 2. 启用下拉刷新 启用下拉刷新有两种方式: ①全局开启下拉刷新 在 app.j ...
- 微信小程序原生的下拉框组件
前言 近日开发微信小程序时,需要一个下拉框的组件,使用和PC端下拉框一样的方式会显得很丑,于是发现微信官方API有个wx.showActionSheet,但是有诸多限制,例如:最大长度只能是6项,多选 ...
- 微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 调用系统的API,系统有提供下拉刷新的API接口 下拉刷新API.png 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一 ...
- 【微信小程序】实现下拉刷新和上拉触底加载更多数据的页面事件
1.下拉刷新事件 1. 什么是下拉刷新 下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为 2. 启用下拉刷新 启用下拉刷新有两种方式: ① 全局开启下拉刷新 ...
- 微信小程序禁用页面下拉，且局部上下滚动不卡顿
众所周知,微信小程序页面在下拉后,顶部会出现留白的不友好用户体验(当然,需要启用页面下拉刷新的另说).官网有禁用下拉的配置,但使用后,如果页面中局部区域需要滚动显示更多内容时,则会出现滚动不顺畅的情况 ...
- 微信小程序 界面禁止下拉 左右滑动_手机 QQ v8.0 正式版上线，新界面，新功能...
本文授权转自艾橙互动公众号. 经过一段时间内测,QQ手机版8.0 版本正式上线了. 目前iOS 版本已经更新,iOS 用户可以通过在App Store 进行更新体验,目前版本为v8.0.0.472. ...
最新文章
- 《游戏设计师修炼之道：数据驱动的游戏设计》一2.8小结
- 微信小程序教学第三章第四节（含视频）：小程序中级实战教程：下拉更新、分享、阅读标识...
- 1.2 学习笔记之数据类型
- 【谈谈IO】BIO、NIO和AIO
- ScrollMagic-jQuery元素滚动动画库插件
- go语言中map+stuct结构体是常用的组合
- 幅频特性曲线protues_短学期--功率放大器电路图设计及Proteus仿真
- linux scl,scl命令
- print 设置纸张的高度_祝贺！ 2020珠峰高程测量登山队成功登顶！用Python计算一张纸对折多少次会超过珠峰高度？...
- 笔记本无线网卡没有连接到计算机,笔记本没有无线网络连接怎么办 解决方法介绍【图解】...
- Linkflow新锐洞察 06 | DTC品牌如何快速规模化？
- 4米乘以12米CAD图_建筑专业CAD识图实例讲解
- 物理隔离网闸——入门篇(2)
- python五种基本数据类型_五大Python基础数据类型
- 怎样用计算机命令提高网速,电脑如何使用命令提示符限制本地网速?
- 下一代存储技术面临市场窗口期？
- 表格对角线两边打字_表格对角线两边打字_表格斜线一分为二怎么打字（excel斜杠分割表格打字）...
- 数据集WordNet-WN18
- Android 屏幕适配之dimens适配
- Python 花瓣网动态爬虫