WX小程序案例(一):弹幕列表

WXML内容

<!--pages/formCase/formCase.wxml-->
<!-- <text>pages/formCase/formCase.wxml</text> -->
<view class="bk bkimg"><!-- <image src="/static/imgs/ceeb653ely1g9na2k0k6ug206o06oaa8.gif" mode="scaleToFill" class="bk"/> --><view class="out"><view class="title">弹幕列表</view><block wx:if="{{danmus.length}}"><view class="list"><view class="row" wx:for="{{danmus}}" wx:key="id"><view class="text">{{index+1}}. {{item.title}}</view><view class="close" bindtap="clickClear" data-index="{{index}}"><icon type="clear" /></view></view></view><view class="count">已装填 {{danmus.length}} 条弹幕</view></block><view wx:else class="count">🈚🈚🈚🈚🈚🈚</view><view class="comment"><!-- 双向绑定,改任意一个另一个也会变 --><input type="text" placeholder="发个友善的弹幕见证当下。。。" placeholder-style="color: #aaa; font-size: 28rpx;" model:value="{{inputValue}}" bindconfirm="onSend"/><button size="mini" type="primary" disabled="{{!inputValue.length}}" style="color: {{inputValue.length?white:black}};" bindtap="onSend">发送</button></view></view></view><!-- <view>{{inputValue}}</view> -->

WXSS内容

/* pages/formCase/formCase.wxss */
/* .bk{width: 750rpx;height: 100vh;background-color: rgba(63, 63, 63, 0.5);position: fixed;top: 0;left: 0;
} */.bk{display: block;  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: gray;  /* z-index: -1; 将背景置于其他元素之下 */
}.title{font-size: 50rpx;text-align: center;color: black;/* 上右下左 */padding: 30rpx 0rpx 30rpx 0rpx;  background-color: #ffffff;
}
.out{width: 690rpx;/* margin: 30rpx; */margin-top: 30rpx;margin-left: auto;margin-right: auto;box-shadow: 0rpx 15rpx 40rpx rgba(0, 0, 0, 0.2);border-radius: 20rpx;padding: 30rpx;box-sizing: border-box;background-color: #ffffff;
}.out .list .row{padding: 15rpx 0;border-bottom: 1rpx solid #eeeeee;display: flex;justify-content: space-between;align-items: center;font-size: 34rpx;color: black;
}
.out .list .row .text{padding-right: 10rpx ;box-sizing: border-box;
}
.out .count{padding: 20rpx 0;margin-top: 10rpx;font-size: 30rpx;color: #333333;text-align: center;
}
.out .comment{display: flex;margin-top: 15rpx;
}
.out .comment input{flex: 4;background-color: rgb(231, 231, 231);margin-right: 10rpx;height: 64rpx;border-radius: 10rpx;padding: 0 20rpx;color: #333333;
}
.out .comment button{flex: 0.8;/* background-color: #20bcf5; *//* color: #aaaaaa; */font-size: 30rpx;font-weight: 100;
}

js内容

// pages/formCase/formCase.js
Page({/*** 页面的初始数据*/data: {bool: "false",inputValue: "",danmus: [{id: 1232,title: "test........"},{id: 1342,title: "下班!!!!!!!!!"},{id: 1342,title: "啊????????????"},{id: 8943,title: "喔哦~~~~~~~"}]},onSend(e) {let value = this.data.inputValuelet arr = this.data.danmus// addarr.push({id: e.timeStamp,title: value})this.setData({danmus: arr,inputValue: ""})wx.showToast({title: '发送成功',icon: 'success',duration: 1000})},
// 注意这里有异步的问题,后面再回来解决,现在就这么写clickClear(e) {wx.showModal({title: '提示',content: '删除此条弹幕?',success:res=> {if (res.confirm) {let arr = this.data.danmuslet i = e.currentTarget.dataset.indexarr.splice(i, 1)this.setData({danmus: arr})}}})console.log(e);},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

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

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

相关文章

使用opencv的Canny算子实现图像边缘检测

1 边缘检测介绍 图像边缘检测技术是图像处理和计算机视觉等领域最基本的问题&#xff0c;也是经典的技术难题之一。如何快速、精确地提取图像边缘信息&#xff0c;一直是国内外的研究热点&#xff0c;同时边缘的检测也是图像处理中的一个难题。早期的经典算法包括边缘算子方法…

【论文阅读】Uncertainty-aware Self-training for Text Classification with Few Label

论文下载 GitHub bib: INPROCEEDINGS{mukherjee-awadallah-2020-ust,title "Uncertainty-aware Self-training for Few-shot Text Classification",author "Subhabrata Mukherjee and Ahmed Hassan Awadallah",booktitle "NeurIPS",yea…

关于嵌入式开发的一些信息汇总:C标准、芯片架构、编译器、MISRA-C

关于嵌入式开发的一些信息汇总&#xff1a;C标准、芯片架构、编译器、MISRA-C 关于C标准芯片架构是什么&#xff1f;架构对芯片有什么作用&#xff1f;arm架构X86架构mips架构小结 编译器LLVM是什么&#xff1f;前端在干什么&#xff1f;后端在干什么&#xff1f; MISRA C的诞生…

​LeetCode解法汇总1631. 最小体力消耗路径

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 描述&#xff1a; 你准备参…

【Linux】使用官方脚本自动安装 Docker(Ubuntu 22.04)

前言 Docker是一种开源平台&#xff0c;用于开发、交付和运行应用程序。它利用了容器化技术&#xff0c;使开发人员能够将应用程序及其依赖项打包到一个称为Docker容器的可移植容器中。这些容器可以在任何运行Docker的机器上快速、一致地运行&#xff0c;无论是开发环境、测试…

make没有更新最新的uImage

在 LCD 驱动的时候发现&#xff0c;linux logo一直弄不出来&#xff0c;猜想可能是因为uImage的问题&#xff0c;就看了一眼 uImage 时间&#xff1a; ​ 我现在的时间是 &#xff0c;那可能就是没有更新make的时候没有更新&#xff0c;就上网搜了一下用下面的命令输出 uImage&…

数据结构(七):树介绍及面试常考算法

一、树介绍 1、定义 树形结构是一种层级式的数据结构&#xff0c;由顶点&#xff08;节点&#xff09;和连接它们的边组成。 树类似于图&#xff0c;但区分树和图的重要特征是树中不存在环路。树有以下特点&#xff1a; &#xff08;1&#xff09;每个节点有零个或多个子节点…

为什么 GAN 不好训练

为什么 GAN 不好训练&#xff1f;先看 GAN 的损失&#xff1a; 当生成器固定时&#xff0c;堆D(x)求导&#xff0c;推理得到&#xff08;加号右边先对log求导&#xff0c;再对负项求导&#xff09; 然后在面对最优Discriminator时&#xff0c;Generator的优化目标就变成了&…

微积分-三角函数2

三角函数 在上一节中&#xff0c;讨论了如何在直角三角形中定义三角函数&#xff0c;限制让我们扩展三角函数的定义域。 事实上我们可以取任意角的正弦和余弦&#xff0c;而不只是局限于 0 0 0~ π 2 \frac{\pi}{2} 2π​当中。 当然需要注意的是&#xff0c;正切函数对不是对…

指数分布的随机变量

如果连续型随机变量的概率密度满足如下条件&#xff1a; 其中为常数&#xff0c;那么就称服从参数为的指数分布。 指数分布的重要性质---无记忆性&#xff1a;

数据结构(7.5)-- 树扩展之字典树

一、字典树 1、字典树介绍 字典树&#xff0c;也称为“前缀树”&#xff0c;是一种特殊的树状数据结构&#xff0c;对于解决字符串相关问题非常有效。典型 用于统计、排序、和保存大量字符串。所以经常被搜索引擎系统用于文本词频统计。它的优点是&#xff1a; 利用字符串的…

(1)(1.8) MSP(MultiWii 串行协议)(4.1 版)

文章目录 前言 1 协议概述 2 配置 3 参数说明 前言 ArduPilot 支持 MSP 协议&#xff0c;可通过任何串行端口进行遥测和传感器。这允许 ArduPilot 将其遥测数据发送到 MSP 兼容设备&#xff08;如大疆护目镜&#xff09;&#xff0c;用于屏幕显示&#xff08;OSD&#xff…

VR智慧眼:为各行业打造3D数字化业务协同平台

自改革开放以来&#xff0c;城镇化建设一直在不断推进实施&#xff0c;如今各城市化速度虽然在不断加快&#xff0c;但随之而来的部分城市开始出现资源短缺、环境污染、交通拥堵、安全隐患等问题&#xff0c;因此为了满足智慧城市大型区域场景数字化升级需求&#xff0c;助力区…

【深入浅出SpringCloud源码探究】「Netflix系列之Ribbon+Fegin」微服务化的负载均衡组件源码剖析与实战开发全流程(Ribbon篇)

微服务化的负载均衡组件源码剖析与实战开发全流程 什么是负载均衡负载均衡的种类服务器端负载均衡&#xff08;S-LB&#xff09;客户端负载均衡&#xff08;C-LB&#xff09;注解LoadBalancedLoadBalancerAutoConfiguration类LoadBalancerClient类源码分析 ServiceInstanceChoo…

ToolLLM model 以及LangChain AutoGPT Xagent在调用外部工具Tools的表现对比浅析

文章主要谈及主流ToolLLM 以及高口碑Agent 在调用Tools上的一些对比&#xff0c;框架先上&#xff0c;内容会不断丰富与更新。 第一部分&#xff0c;ToolLLM model 先来说主打Function Call 的大模型们 OpenAI GPT 宇宙第一LLM&#xff0c;它的functionCall都知道&#xff0…

python 小程序学生选课系统源码

开发工具&#xff1a; PyCharm&#xff0c;mysql5.7&#xff0c;微信开发者工具 技术说明&#xff1a; python django html 小程序 功能介绍&#xff1a; 学生&#xff1a; 登录&#xff0c;选课&#xff08;查看课程及选择&#xff09;&#xff0c;我的成绩&#xff0c;…

Axure中动态面板使用及轮播图多种登录方式左侧导航栏之案列

&#x1f3ac; 艳艳耶✌️&#xff1a;个人主页 &#x1f525; 个人专栏 &#xff1a;《产品经理如何画泳道图&流程图》 ⛺️ 越努力 &#xff0c;越幸运 目录 一、轮播图简介 1、什么是轮播图 2、轮播图有什么作用 3、轮播图有什么特点 4、轮播图适应范围 5、…

解决Chrome同一账号在不同设备无法自动同步书签的问题

文章目录 一、问题与原因&#xff1f;2. 解决办法 一、问题与原因&#xff1f; 1.问题 使用谷歌Chrome浏览器比较头疼的问题就是&#xff1a;使用同一个Google账号&#xff0c;办公电脑与家用电脑的数据无法同步。比如&#xff1a;办公电脑中的书签、浏览记录等数据&#xff0…

C语言----文件操作(二)

在上一篇文章中我们简单介绍了在C语言中文件是什么以及文件的打开和关闭操作&#xff0c;在实际工作中&#xff0c;我们不仅仅是要打开和关闭文件&#xff0c;二是需要对文件进行增删改写。本文将详细介绍如果对文件进行安全读写。 一&#xff0c;以字符形式读写文件&#xff…

Nessus漏洞扫描报错:42873 - SSL Medium Strength Cipher Suites Supported (SWEET32)

个人搭建的windows server 2019服务器,被Nessus工具扫描出现三个漏洞,修复比较过程比较坎坷,特记录下 首先:报错信息: 42873 - SSL Medium Strength Cipher Suites Supported (SWEET32) 104743 - TLS Version 1.0 Protocol Detection 157288 - TLS Version 1.1 Protocol …