每日签到页面模板组件,简单好用,用了会上瘾的那种

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

今日给大家分享一款基于uniapp封装的每日签到页面模板组件,主打就是简单容易上手,巨好用。支持各家小程序应用平台,也支持vue2、vue3开发。
在这里插入图片描述

直接通过插件市场,引入到uni_modules目录即可。同时也支持自定义为系统组件使用。

<template><view><gb-qiandao :days="days" :play_number="play_number" :search_number="search_number" :full_ad="full_ad":taskList="taskList" :completeDay="completeDay" :dayList="dayList" :rule="rule" :taskStatus="taskStatus"@receiveMoney="receiveMoney" @listTab="listTab"></gb-qiandao></view>
</template><script>export default {data() {return {// 签到天数days: 0,// 签到任务第一个play_number: 0,// 签到任务第二个search_number: 0,// 签到任务第三个full_ad: 0,// 已完成天数completeDay: 0,// 签到状态 0.代表未签到 1.代表已签到taskStatus: 0.,// 签到规则rule: '这里是签到规则,你可以任意编辑',// 签到任务奖励数组dayList: [1, 1, 2, 3, 5, 6, 7],// 签到任务taskList: [{title: '试玩游戏',img: '../../static/yx.png',number: 1,dec: '完成游戏赚相关游戏'},{title: '试玩应用',img: '../../static/zl.png',number: 1,dec: '完成应用赚相关任务'},{title: '观看广告',img: '../../static/kgg.png',number: 10,dec: '观看广告赚相关广告'}]}},onLoad() {this.getData()},methods: {// 获取用户签到得相关信息,自己写接口获取即可getData() {},// 签到并领取奖励receiveMoney() {uni.showToast({title: "签到成功并获得奖励",icon: 'none',position: 'bottom'})},// 签到任务完成listTab(i) {if (i == 0) {uni.showToast({title: "跳转第一个任务",icon: 'none',position: 'bottom'})}if (i == 1) {uni.showToast({title: "跳转第二个任务",icon: 'none',position: 'bottom'})}if (i == 2) {uni.showToast({title: "跳转第三个任务",icon: 'none',position: 'bottom'})}}}}
</script><style></style>

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

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

相关文章

机器学习算法(二):1 逻辑回归的从零实现(普通实现+多项式特征实现非线性分类+正则化实现三个版本)

文章目录 前言一、普通实现1 数据集准备2 逻辑回归模型3 损失函数4 计算损失函数的梯度5 梯度下降算法6 训练模型二、多项式特征实现非线性分类1 数据准备与多项式特征构造2 逻辑回归模型三、逻辑回归 --- 正则化实现1 数据准备2 逻辑回归模型3 正则化损失函数4 计算损失函数的…

前端下载文件流,axios设置responseType: arraybuffer/blob无效

项目中调用后端下载文件接口&#xff0c;设置responseType: arraybuffer,实际拿到的数据data是字符串 axios({method: post,url: /api/v1/records/recording-file/play,// 如果有需要发送的数据&#xff0c;可以放在这里data: { uuid: 06e7075d-4ce0-476f-88cb-87fb0a1b4844 }…

图像编辑技术的新篇章:基于扩散模型的综述

在人工智能的浪潮中&#xff0c;图像编辑技术正经历着前所未有的变革。随着数字媒体、广告、娱乐和科学研究等领域对高质量图像编辑需求的不断增长&#xff0c;传统的图像编辑方法已逐渐无法满足日益复杂的视觉内容创作需求。尤其是在AI生成内容&#xff08;AIGC&#xff09;的…

CPP-类对象大小的组成

要计算一个类对象的大小要先明白一个问题&#xff1a;类中既可以有成员变量&#xff0c;又可以有成员函数&#xff0c;那么一个类的对象中包含了什么&#xff1f; 下面来看一段代码&#xff1a; // 类中既有成员变量&#xff0c;又有成员函数 class A1 { public:void f1() {} …

快速生成基于vue-element的后台管理框架,实现短时间二次开发

你是否遇到过当你想要独立开发一个项目时对反复造轮子的烦扰&#xff1f; 这种流水线的操作实在让人受不了 而vue-element-template很好的帮你解决了这个烦恼 只需克隆下来&#xff0c;改改图标&#xff0c;模块名&#xff0c;甚至样式&#xff0c;就会变成一个全新的自己的项目…

轻松恢复丢失数据EasyRecovery你的数据守护神

数据丢失&#xff1f;别怕&#xff01;EasyRecovery来帮忙 大家好呀&#xff0c;今天我要分享一个我超级喜欢的数据恢复软件——EasyRecovery&#xff01;&#x1f389; 如果你也经历过误删文件、硬盘格式化或是意外丢失重要数据的尴尬和焦虑&#xff0c;那你一定要看看这个神器…

uniapp 微信小程序更改轮播图指示点

仅微信小程序有效 /* #ifdef MP-WEIXIN */// 默认指示点样式wx-swiper .wx-swiper-dot {position: relative;background-color: #ffffff;width: 28rpx;border-radius: 10rpx;height: 8rpx;opacity: 0.4;}// 当前选中样式wx-swiper .wx-swiper-dot-active {background-color: #f…

HTML静态网页成品作业(HTML+CSS)——家乡泉州介绍网页(3个页面)(表格布局)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;table布局&#xff0c;未使用Javacsript代码&#xff0c;共有3个页面。…

HarmonyOS父子组件传递参数

HarmonyOS父子组件传递参数 1. 使用State和Prop进行父子组件传递———注意是单向同步 Prop装饰器&#xff1a;父子单向同步 注意&#xff1a;只支持单向同步&#xff0c;同时也只能支持string\number\boolean\enum比较简单的类型。 代码 // 使用 props 进行父子组件传值…

Python爬虫介绍

Python 作为一种广泛应用的编程语言&#xff0c;在 Web 开发、大数据开发、人工智能开发和嵌入式开发等领域都有着重要的应用。 Python 的易学性、清晰性和可移植性等特点使它得到很多技术人士的喜爱。对于数据科学和机器学习领域的程序员来说&#xff0c;Python 提供了强大的…

朴素贝叶斯案例

一、朴素贝叶斯算法&#xff1a; 朴素贝叶斯算法&#xff0c;是一种基于贝叶斯定理与特征条件独立假设的分类方法&#xff0c;基于贝叶斯后验概率建立的模型&#xff0c;它用于解决分类问题。朴素&#xff1a;特征条件独立&#xff1b;贝叶斯&#xff1a;基于贝叶斯定理。属于…

【Python】已解决:ModuleNotFoundError: No module named ‘paddle’

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;ModuleNotFoundError: No module named ‘paddle’ 一、分析问题背景 在Python编程中&#xff0c;ModuleNotFoundError是一个常见的错误&#xff0c;它通常发生…

C语言中的进制转换

基础概念 进制又称数制&#xff0c;是指用一组固定的符号和统一的规则来表示数值的方法&#xff0c;在C语言中&#xff0c;可以使用不同的前缀来表示不同的进制&#xff1a; 二进制&#xff1a;以0b或0B为前缀&#xff08;部分编译器可能不支持&#xff09;八进制&#xff1a…

【论文精读】分类扩散模型:重振密度比估计(Revitalizing Density Ratio Estimation)

文章目录 一、文章概览&#xff08;一&#xff09;问题的提出&#xff08;二&#xff09;文章工作 二、理论背景&#xff08;一&#xff09;密度比估计DRE&#xff08;二&#xff09;去噪扩散模型 三、方法&#xff08;一&#xff09;推导分类和去噪之间的关系&#xff08;二&a…

LVGL8.3动画图像(太空人)

LVGL8.3 动画图像 1. 动画图像本质 我们知道电影属于视频&#xff0c;而电影的本质是将一系列动作的静态图像进行快速切换而呈现出动画的形式&#xff0c;也就是说动画本质是一系列照片。所以 lvgl 依照这样的思想而定义了动画图像&#xff0c;所以在 lvgl 中动画图像类似于普…

能理解你的意图的自动化采集工具——AI和爬虫相结合

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三连支…

浅聊Cookie

前言 在客户端使用Nuxt的useFetch调用接口并存储cookie&#xff0c;发现一些趣事~ cookie存储需要遵守同源策略~ 理论我们是知道的&#xff0c;但具体是怎么一回事呢~ 实现 在Nuxt中是这样的~ 直接访问 Nuxt <template><div>{{ data }}</div> </te…

【python】python学生成绩数据分析可视化(源码+数据+论文)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

c#使用自带库对字符串进行AES加密、解密

文章目录 1 代码1.1 定义Aes加密类块1.2 在主函数中调用 2 获取Key和IV2.1 基本方法2.2 自定义Key2.3 技术方面的原理 参考文章&#xff1a; C#软件加密实例&#xff1f; 。 参考官文&#xff1a; Aes 类。 在使用C#的自带的System.Security.Cryptography.Aes模块进行加密和解…

Spdlog日志库的安装配置与源码解析(Linux)

为什么使用日志库而不是控制台输出&#xff1f; 日志库通常提供了更丰富的功能&#xff0c;比如可以设置日志输出级别、输出到不同的目标&#xff08;比如控制台、文件、网络等&#xff09;&#xff0c;以及格式化输出等。 使用日志库可以使代码更易于维护。通过统一的日志接口…