微信小程序之九宫格抽奖

1.实现效果

九宫格

2. 实现步骤

话不多说,直接上代码

/**index.wxml*/
<view class="table-list flex fcc fwrap">
    <block wx:for="{
   {tableList}}" wx:key="id">
        <view class="table-item btn fcc {
   {isTurnOver?'':'grayscale'}}" wx:if="{
   {item.type=='btn'}}" bind:tap="onPrizeClick">{
   {
   item.name}}</view>
        <view class="table-item fcc {
   {item.isSelected?'selected':''}}" wx:else>{
   {
   item.name}}</view>
    </block>
</view>
import {
    showTextToast } from '../../utils/util';

// pages/turnTable/index.js
Page({
   
  /**
   * 页面的初始数据
   */
  data: {
   
    tableList: [
      {
    id: '1', type: 'prize', name: '奖品1', isSelected: false },
      {
    id: '2', type: 'prize', name: '奖品2', isSelected: false },
      {
    id: '3', type: 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于springboot实现社区智慧养老监护管理平台系统项目【项目源码+论文说明】计算机毕业设计

基于SpringBoot实现社区智慧养老监护管理平台系统演示 摘要 如今社会上各行各业&#xff0c;都在用属于自己专用的软件来进行工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。互联网的发展&#xff0c;离不开一些新的技术&#xff0c;而新技术的…

Dubbo配置上的一些概念

对于dubbo在spring中我们可能看到有如下配置&#xff08;可参考Schema 配置参考手册 | Apache Dubbo&#xff09;&#xff1a; dubbo:application:id: dubbo-account-examplename: dubbo-account-example# 是否启用 Dubbo 的 QoS&#xff08;Quality of Service&#xff09;服…

Minecraft 我的世界服务器Java版开服联机教程

本教程使用Paper核心开服 1、进入控制面板 1.2、第一次购买服务器会安装游戏端&#xff0c;大约5分钟左右&#xff0c;如果长时间处于安装状态请联系客服 2、开启服务器 2.1、等待出现同意Minecraft EULA 协议时&#xff0c;点击“我接受” 2.2、等待running出现服务器就打开了…

基于springboot实现酒店管理系统项目【项目源码+论文说明】

基于springboot实现酒店管理系统演示 摘要 时代的发展带来了巨大的生活改变&#xff0c;很多事务从传统手工管理转变为自动管理。自动管理是利用科技的发展开发的新型管理系统&#xff0c;这类管理系统可以帮助人完成基本的繁琐的反复工作。酒店是出门的必需品&#xff0c;无论…

【案例教程】土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测

查看原文>>>土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测 土地利用/土地覆盖数据是生态、环境和气象等领域众多模型的重要输入参数之一。基于遥感影像解译&#xff0c;可获取历史或当前任何一个区域的土地利用/土地覆盖数据&#xff0c;用于评估区域的生…

你了解 pom.xml 吗

你了解pomxml吗 springboot 是 java 利器&#xff0c;几乎每个写 java 的同学都会用&#xff0c;但是你了解 pom.xml 吗&#xff1f; 这篇干货查漏补缺。 首先我们创建个 springboot 项目 都选了默认设置&#xff1a; 我把这篇完整粘贴出来 pom.xml <?xml version&quo…

ENSP-USG6000v45错误代码解决方法

官方解决方法&#xff1a; 官方解决方法没用&#xff0c;其他解决方法&#xff1a; 卸载ENSP&#xff0c;重新安装&#xff0c;路径选择全英文&#xff0c;问题解决&#xff01;

ChatGLM大模型简介

ChatGLM系列是国产大语言模型中性能最好、回答准确率最高的大模型。如果有毕业论文、课题研究的需要&#xff0c;可以关注一下这个大模型。 清华大学和智谱AI的第一代ChatGLM-6B在2023年3月份推出&#xff0c;开源模型推出之后不久就获得了很多的关注和使用。3个月后的2023年6…

深入理解MySQL三大日志:redo log、binlog、undo log

前言 MySQL是一个功能强大的关系型数据库管理系统&#xff0c;它的高可靠性、高性能和易用性使得它成为众多企业和开发者的首选。在MySQL内部&#xff0c;为了保证数据的完整性、恢复能力和并发性能&#xff0c;设计了一套复杂的日志系统。其中&#xff0c;redo log、bin log和…

代码随想录Day 47|Leetcode|Python|392.判断子序列 ● 115.不同的子序列

392.判断子序列 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;"ace"是"abcde"的…

springboot房屋租赁系统

摘要 房屋租赁系统&#xff1b;为用户提供了一个房屋租赁系统平台&#xff0c;方便管理员查看及维护&#xff0c;并且可以通过需求进行设备信息内容的编辑及维护等&#xff1b;对于用户而言&#xff0c;可以随时进行查看房屋信息和合同信息&#xff0c;并且可以进行报修、评价…

熟知Linux目录结构,配置网络(超级详细……)

一、目录结构 1.1目录的特点 Windows和Linux win&#xff1a;是一个多根系统 Linux&#xff1a;只有一个根是一个单根系统 1.2各个目录存储的内容 /root&#xff1a;Linux中管理员用户的家目录 /home&#xff1a;Linux中存储普通用户的家目录例&#xff1a;tom用户的家目录就…

matlab使用教程(71)—控制坐标区布局

1.与位置相关的属性和函数 有几个属性和函数可用于获取和设置坐标区的大小与位置。下表摘要显示了这些属性和函数。 函数或属性描述 OuterPosition 属性 使用此属性可以查询或更改坐标区的外边界&#xff0c;包括标题、标签和边距。要更改外边界&#xff0c;请将此属性指定为…

Android 异常开机半屏重启代码分析

Android 的稳定性是 Android 性能的一个重要指标&#xff0c;它也是 App 质量构建体系中最基本和最关键的一环&#xff1b;如果应用经常崩溃&#xff0c;或者关键功能不可用&#xff0c;那显然会对我们的留存产生重大影响所以为了保障应用的稳定性&#xff0c;我们首先应该树立…

SpringBoot(一)之初始化

SpringBoot(一)之初始化 文章目录 SpringBoot(一)之初始化SpringBoot框架 SpringBoot简化配置1. 创建SpringBoot项目关于初始化错误 2. SpringBoot项目结构主类pom.xml1. 关于spring-boot-starter-parent2. 关于spring-boot-starter-web3. 关于spring-boot-starter-test4. 关于…

Shopee、Lazada等平台怎么做测评?

最近有很多人咨询南哥跨境电商平台测评应该怎么做&#xff0c;今天我就针对东南亚站点&#xff0c;详细跟大家分享一下东南亚平台测评需要哪些资源 测评环境系统 不管做任何平台&#xff0c;首先你要有一个稳定的测评环境系统&#xff0c;测评环境系统的底层逻辑就是通过一台…

80%的产品经理被辞退不是因为能力,而是因为…

新手刚入门做产品经理&#xff0c;对产品经理的工作其实也是没有把握&#xff0c;这是对这份工作不够了解&#xff0c;不知道整个工作的流程&#xff0c;所以会感觉“没把握”&#xff0c;结果就是导致焦虑。 如果你硬着头皮做一遍&#xff0c;知道大概是怎么回事&#xff0c;…

Redis过期删除策略和内存淘汰策略有什么区别?

Redis过期删除策略和内存淘汰策略有什么区别&#xff1f; 前言过期删除策略如何设置过期时间&#xff1f;如何判定 key 已过期了&#xff1f;过期删除策略有哪些&#xff1f;Redis 过期删除策略是什么&#xff1f; 内存淘汰策略如何设置 Redis 最大运行内存&#xff1f;Redis 内…

电脑版的学浪课程下载方法

想在你的电脑上无限制地访问你最爱的学浪课程吗&#xff1f;现在&#xff0c;让我揭秘如何用几个简单步骤&#xff0c;轻松下载任何学浪课程到你的电脑&#xff0c;让学习不再受时间和地点的限制&#xff0c;随时随地都是你的课堂。 下载学浪视频的工具&#xff0c;我已经打包…

前端 JS 经典:数组去重万能方法

前言&#xff1a;只需要掌握这一个方法&#xff0c;就可以对有任何重复的数据数组&#xff0c;进行去重了。 可以自己思考下&#xff0c;怎么对以下对象数组去重&#xff1a; const arr [{ a: 1, b: 2 },{ b: 2, a: 1 },{ a: 1, b: 2, c: { a: 1, b: 2 } },{ b: 2, a: 1, c:…