微信小程序系列(5)如何用微信小程序写一个论坛?贴心代码详解(三)列表页

源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs

写论坛不难,重点是各页面之间的信息传递!

先放成品图,虽然有点单调。。。。但是麻雀虽小五脏俱全!
在这里插入图片描述
论坛功能:

1. 发帖(带图片)
2. 浏览各帖
3. 评论
4. 搜素帖子
5. 作者删自己的贴

以上是论坛必备的功能,缺哪个都不完整哦~
这里使用了iview weapp组件

贴心代码详解(三)会讲列表部分

在这里插入图片描述
wxml

<view class="content"><view class="bg"><view class="name">创意集</view><form  bindsubmit="formSubmit"><view class="search"><button class='find' form-type="submit" style="width:50px;height:30x">查询</button><input type="text" name="find" placeholder="帖子名称" form-type="submit"/><button class='btn' bindtap="img" >发帖</button></view></form>  </view></view>  <view wx:for="{{list}}" wx:key="list">
<navigator url="../detail/detail?id={{item.id}}" open-type="navigate" ><view class="title">【{{item.category}}】{{item.title}}</view><view class="pic"><image style="width:30%;height:69px;" src="{{item.pic}}"/><view class="info"><view class="desc"><text>{{item.commentNumber}}条评论</text><text>{{item.time}}</text><text>楼主:{{item.writer}}</text><view class="opr"></view></view></view>
</view>
<view class="hr"></view>
</navigator>
</view>

json

{"usingComponents": {"i-row": "../../dist/row/index","i-col": "../../dist/col/index"
}
}

js


var app = getApp();
Page({onPullDownRefresh() {this.onShow();console.log("上拉刷新");wx.showNavigationBarLoading() //在标题栏中显示加载},img:function(){wx.navigateTo({url: '../img/img'})},getUserInfo:function(e){console.log(e.detail.userInfo)wx.request({    url: app.globalData.url+'all',  data:{'writer': e.detail.userInfo.nickName,  'pic' : e.detail.userInfo.avatarUrl,method: 'POST',  header: {'content-type': 'application/json'},success:function(res) {  console.log('submit successs');  },  fail:function(res){  console.log('submit fail');  }}})
},formSubmit(e) {console.log(e.detail.value)wx.navigateTo({url: '../find/find?find='+e.detail.value.find,//这里是重点!!!页面信息传递,要结合我的上一篇博客看})},/*** 页面的初始数据*/data: {title:"",writer:" ",time:"",number:"",},/*** 生命周期函数--监听页面加载*/onLoad: function () {var that = thiswx.request({url: app.globalData.url+'community',headers: {'Content-Type': 'application/json'},success: function (res) {//将获取到的json数据,存在名字叫list的这个数组中console.log(res.data);that.setData({list: res.data.data,//res代表success函数的事件对,data是固定的,list是数组})}})},tempData: function () {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {var that = thiswx.request({url: app.globalData.url+'community',headers: {'Content-Type': 'application/json'},success: function (res) {//将获取到的json数据,存在名字叫list的这个数组中console.log(res.data);that.setData({list: res.data.data,//res代表success函数的事件对,data是固定的,list是数组})}})},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

写了三篇论坛相关内容了,大家每篇都读一定会有更深的感受!!!学习贵在坚持

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/71893.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

掌握微信小程序 this 指向,轻松编写高质量代码

前言 最近在开发微信小程序时不时会遇到一个很奇怪的问题&#xff0c;有些情况下用 this.setData 可以改变视图显示&#xff0c;有些情况下使用 this.setData 无效&#xff0c;这又是为什么呢&#xff1f; 问题描述 在解释这个问题前&#xff0c;我们先来看两段代码&#xff1…

微信小程序代码记录

css命名 https://github.com/Tencent/tdesign-common/blob/main/css-naming.md 界面设置 页面标题 json {"usingComponents": {},"navigationBarTitleText": "库存搜索","navigationBarBackgroundColor": "#9D1117",&q…

微信小程序系列(3)如何用微信小程序写一个论坛?贴心代码详解(一)发帖

源代码已开源&#xff0c;如果对你有帮助可以点个星&#xff1a;https://github.com/linkaimin/xdzs 写论坛不难&#xff0c;重点是各页面之间的信息传递&#xff01; 先放成品图&#xff0c;虽然有点单调。。。。但是麻雀虽小五脏俱全&#xff01; 论坛功能&#xff1a; 1…

手把手教你写一个微信小程序(附源码)

以下内容来自公众号逆锋起笔&#xff0c;关注每日干货及时送达 来源&#xff1a;blog.csdn.net/zwb19940216/ article/details/81023191 前言 现在微信小程序越来越火了&#xff0c;相信不少人都通过各种途径学习过微信小程序或者尝试开发&#xff0c;作者就是曾经由于兴趣了解…

为什么复制粘贴时html,为什么我粘贴文本的时候发现和复制时的不一样

2008-05-12 在新浪博客里&#xff0c;看到好多人博客里的每篇文章后面都有一些很个性的链接或者图片&#xff0c;就像QQ空间里的签名一样&#xff0c;应该怎样做 一、我的个性名片的代码如下&#xff1a;CRL南宁市欢迎你的光临说明&#xff1a;其余的蓝色部分你可以更换为自己的…

最新HTML微信聊天对话生成器网页源码+实测可用

正文: 用来装X_OR制作抖音幽默段子还是不错的&#xff08;如果需要的人多&#xff0c;有时间的话后面可能会考虑出一个高级点的&#xff09;。 下载源码后双击 index.html 运行即可&#xff0c;不需要服务器。 程序: wwgrlu.lanzouy.com/iMwK00grrvhe 图片:

会员信息管理系统

欢迎大佬指点&#xff01;&#xff01; 亲测可用&#xff01; 改了 几个bug 更新 之后的代码 会员信息管理系统文本说明 功能&#xff1a; 消费 ①从vipinf.txt的文本文件中LOAD()建立一个链表&#xff0c;之后的操作全部在链表中进行。在链表中修改消费信息&#xff0c;并将…

积分运营系列—一款优秀积分商城产品需具备的准则与功能梳理

我们常说的商业积分的应用&#xff0c;往往有两个核心目的&#xff1a; 给予商业预期的用户行为予回报&#xff0c;导向更深入、更频繁的核心业务。维护用户&#xff08;客户&#xff09;&#xff0c;绑定客户&#xff0c;引导低价值用户转化为高价值用户。 积分体系是否能够…

分享小程序会员积分管理系统的优势_会员积分管理系统的作用

商场、超市对用户进行管理&#xff0c;基本上都是采用积分管理&#xff0c;通过用户注册&#xff0c;施行积分积累制度&#xff0c;不仅能够有效吸引消费者消费更多商品或者服务&#xff0c;商家还能采用会员营销的方式&#xff0c;开展会员日活动&#xff0c;通过积分管理模式…

第三方支付-手续费系统设计与实现

1、手续费中的概念 1.1 手续费的定义 根据百度百科的定义&#xff0c;“手续费&#xff1a;办事过程中所产生的费用”&#xff0c;“手续费”可以这样解释&#xff1a;为代理他人办理有关事项所收取的一种劳务补偿&#xff1b;或对委托人来讲&#xff0c;是属于因他人代为办理…

盛世昊通董车长APP新功能上线,看视频获收益

近日,盛世昊通董车长APP新功能上线,新版本中首次加入视频广告“任务中心”,看视频广告就能获取收益,通过该功能,用户只要在董车长APP中邀请好友一起看视频做任务即可获取高额视频豆。积累的视频豆可以在董车长APP兑换分红收益,这个既能开开心心看广告又能获取丰厚收益的功…

CRM原型、协同办公APP高保真原型/审批管理、办公申请、工单管理、任务管理、日程管理、工作报告、签到考勤、客户管理、销售线索、商机管理、订单管理、账务管理、统计报表、回款管理、发票管理、报销管理

CRM及协同办公APP高保真原型/审批管理、办公申请、工单管理、任务管理、日程管理、工作报告、签到考勤、客户管理、销售线索、商机管理、订单管理、账务管理、统计报表、回款管理、发票管理、报销管理 Axure原型演示及下载地址&#xff1a;Axure Cloud - Generating Project A…

电子不停车收费系统(ETC)专题(1)——系统概述

我国道路交通普遍较为拥堵已经在国人的脑海中留下了深刻的印象&#xff0c;每当车辆通过收费站时都要停下来缴费&#xff0c;既耽误了司机和乘客的时间&#xff0c;又消耗了交通管理部门的人力、物力和财力&#xff0c;更重要的时候&#xff0c;加剧了交通拥挤。因此&#xff0…

互融云汽车融资租赁系统-汽车金融软件开发

汽车融资租赁作为汽车金融中典型的业务模式&#xff0c;是一种依托现金分期付款的方式&#xff0c;在此基础之上引入出租服务中所有权和使用权分离的特性&#xff0c;租赁结束后将所有权转移给承租人的现代营销方式。即在租赁期内&#xff0c;用户以分期支付租金的方式获得车辆…

酷信即时通讯开放平台和支付系统简述

一、通过网页申请成为开发者&#xff0c;审核通过后集成开放平台SDK到自己的APP或游戏中&#xff0c;运行时如果未安装酷信IM则提示安装&#xff0c;否则提示是否授权使用酷信IM帐号登录。 二、登录后&#xff0c;可分享给酷信即时通讯的好友、群组、生活圈&#xff0c;比如分享…

免费会员管理管理系统

csdn下载链接&#xff1a; https://download.csdn.net/download/zhupengfei/11422345 本软件可免费使用&#xff0c;无限制。需要的可以直接下载安装。本软件win10可直接使用&#xff0c;其他版本的可能需要安装.net4.0组件。安装时有提示。 最近比较忙&#xff0c;软件已免…

开发CRM客户关系管理系统需要多少钱

现阶段各个领域都少不了和客户相处&#xff0c;所以也必须对住户关联进行监管&#xff0c;跟踪业务流程进度情况&#xff0c;促使协作。伴随着现代科技的高速发展&#xff0c;及其管理模式的兴起&#xff0c;CRM客户关系管理系统开发逐步完善&#xff0c;而且在销售工作普及化。…

恒溢会员管理系统使用说明

恒溢会员管理系统是这样一款专业的会员管理软件&#xff0c;可针对不同行业&#xff08;理发店、美容院、美甲店、休闲、娱乐、汽车服务、洗衣店等&#xff09;&#xff0c;可实现对会员基本信息、充值、套餐、消费、优惠、提成、统计、报表等综合性的管理&#xff0c;可选配短…

免费的图书管图书借阅管理系统

百宝云图书借阅系统 基于百宝云在线表单设计的图书借阅系统&#xff0c;实现了三个基本功能。主要运用到了百宝云表单系统的数据联动和计算公式。这样借书还书只要扫一个条形码&#xff0c;图书资料会自动显示。本套系统免费使用&#xff0c;适合中小型图书借阅机构和简单图书…

CRM系统多少钱一套?盘点主流各大CRM系统价格

阅读本文你将了解&#xff1a;1.CRM定价规则&#xff1b;2.各大CRM系统报价&#xff08;CRM系统多少钱一套&#xff09;;3.CRM系统费用构成。 一、CRM定价规则 很多企业都寻求使用CRM系统来管理客户关系&#xff0c;从而优化管理流程&#xff0c;提升业绩。 对于企业而言&…