实验六 智能手机互联网程序设计(微信程序方向)实验报告

实验目的和要求

  • 请完成创建图片库应用,显示一系列预设的图片。

  •  提供按钮来切换显示不同类别的图片。

 

二、实验步骤与结果(给出对应的代码或运行结果截图)

1.WXML

<view>

  <button bindtap="showAll">所有图片</button>

  <button bindtap="showAnimals">动物</button>

  <button bindtap="showNature">自然</button>

  <view class="image-list">

    <block wx:for="{{show}}" wx:key="index"> 

      <image src="{{item.url}}" mode="widthFix"></image>

    </block>

  </view>

</view>

2.WXSS

button {

  border:none ;/* 去除按钮边框 */

  border-radius: 5px;/* 设置边角为圆角,圆角半径为5px */

  text-align: center; /* 文字居中显示 */

  font-size: 16px;/* 文字大小设置为16px */

  display: block;/* 设置按钮为块级元素,使其独占一行 */

  width: 90%;/* 按钮宽度为容器宽度的90%,以保持一定的边距 */

  margin: 10PX auto;/* 垂直边距为10px,水平自动居中对齐 */

  padding: 10px;/* 内边距为10px,增加点击区域,使按钮更容易点击 */

  background-color: #007AFF;/* 设置按钮的背景颜色为深蓝色 */

  color:#ffffff/* 设置按钮文字颜色为白色,以提高对比度和可读性 */

 

}

/* 图片样式 */

image {

 width: 100%; /* 图片宽度设置为100%填满容器宽度,适应不同屏幕 */

  margin-top: 10px;/* 图片上边距为10px,用于与上方内容保持距离 */

  margin-bottom: 10px;/* 图片下边距也为10px,与下方内容保持距离 */

  border-radius: 8px;/* 设置图片边角为圆角,圆角半径为8px,增加美观 */

}

3.JS

Page({

  /**

   * 页面的初始数据

   */

  data: {

    images: [

      { url: 'https://img2.baidu.com/it/u=622413623,4084455738&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082', type: 'animal' },

      { url: 'https://img2.baidu.com/it/u=2614849573,2966135114&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888', type: 'nature' },

      { url: 'https://img2.baidu.com/it/u=2829124655,2639685270&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500', type: 'animal' }

    ],

    show: [] //

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    

  },

  showAll(){

    this.setData({

      show:this.data.images

    })

  },

  showAnimals() {

    const show_animal=this.data.images.filter(images=>images.type === "animal")

    this.setData({

      show:show_animal

    });

  },

  showNature() {

    const show_nature=this.data.images.filter(images=>images.type === "nature")

    this.setData({

      show:show_nature

    });

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

    

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

    

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

    

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

    

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

    

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

    

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

    

  }

})

实验思路

1.WXML
1.1 定义页面主视图
页面的主体内容被一个view组件包含,这个view作为容器,里面包含所有的子组件,包括按钮和图片列表。
<view>-><button>*3 & <view class="image-list">

1.2 添加功能按钮
在页面的顶部,我们添加了三个button组件,每个按钮通过bindtap事件绑定到相应的函数,用于控制下方图片列表的显示内容:

第一个按钮(所有图片):当点击时,触发showAll函数,显示所有图片。
<button bindtap="showAll">所有图片</button>
第二个按钮(动物):当点击时,触发showAnimals函数,仅显示属于动物类别的图片。
<button bindtap="showAnimals">动物</button>
第三个按钮(自然):当点击时,触发showNature函数,仅显示属于自然类别的图片。
<button bindtap="showNature">自然</button>


1.3 设置图片展示区
在按钮下方,设置了一个类名为“image-list”的view组件作为图片展示区。这个区域使用了block容器来循环渲染filteredImages数组中的每一项:
<block wx:for="{{filteredImages}}" wx:key="index"> </block>
每个block组件包含一个image组件,用于显示单个图片。
image组件的src属性绑定到数组项的url属性,这样每个图片的链接都是动态加载的。
<image src="{{item.url}}" mode="widthFix"></image>
图片使用mode="widthFix"属性确保图片的宽度自适应容器宽度

2.WXSS

/* 按钮样式 */
button {
  /* 设置按钮为块级元素,使其独占一行 */
  /* 按钮宽度为容器宽度的90%,以保持一定的边距 */
  /* 垂直边距为10px,水平自动居中对齐 */
  /* 内边距为10px,增加点击区域,使按钮更容易点击 */
  /* 设置按钮的背景颜色为深蓝色 */
  /* 设置按钮文字颜色为白色,以提高对比度和可读性 */
  /* 去除按钮边框 */
  /* 设置边角为圆角,圆角半径为5px */
  /* 文字居中显示 */
  /* 文字大小设置为16px */
}

  
/* 图片样式 */
image {
  /* 图片宽度设置为100%填满容器宽度,适应不同屏幕 */
  /* 图片上边距为10px,用于与上方内容保持距离 */
  /* 图片下边距也为10px,与下方内容保持距离 */
  /* 设置图片边角为圆角,圆角半径为8px,增加美观 */
}

3.JS
// index.js
Page({
  data: {
    images: [
      { url: '图像1路径', type: 'animal' },
      { url: '图像2路径', type: 'nature' },
      { url: '图像3路径', type: 'animal' }
    ],
    filteredImages: [] //
  },

// 方法:显示所有图片
  showAll() {
    请补全注释里的代码 // 调用setData方法来更新filteredImages数组为所有图片的数组
  },
  showAnimals() {
        请补全注释里的代码 // 使用filter方法筛选出类型为'animal'的图片 (this.data.images.filter)
    this.setData({
       请补全注释里的代码 // 调用setData方法来更新页面数据仅显示筛选后的'animal'类型图片
    });
  },
  showNature() {
    请补全注释里的代码 // 使用filter方法筛选出类型为'nature'的图片 (this.data.images.filter)
    this.setData({
    请补全注释里的代码 // 调用setData方法来更新页面数据仅显示筛选后的'animal'类型图片
    });
  }
});

可以使用的图片路径:
https://img2.baidu.com/it/u=622413623,4084455738&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082
https://img2.baidu.com/it/u=2614849573,2966135114&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888
https://img2.baidu.com/it/u=2829124655,2639685270&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500

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

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

相关文章

小程序视频怎么保存到mp4

小程序上的视频如何下载成mp4&#xff0c;本文就将教大家如何将小程序视频保存到mp4&#xff0c;这里要用到一个工具:下载高手 下载高手的文件我已经打包好了 下载高手链接&#xff1a;https://pan.baidu.com/s/1qJ81sNBzzzU0w6DWf-9Nxw?pwdl09r 提取码&#xff1a;l09r -…

PHP反序列化命令执行+PHP反序列化POP大链 +PHP反序列化基础

[题目信息]&#xff1a; 题目名称题目难度PHP反序列化命令执行1 [题目考点]&#xff1a; 反序列化命令执行&#xff0c;获取题目flag。[Flag格式]: SangFor{t5euvZ_OB8Jd_h2-}[环境部署]&#xff1a; docker-compose.yml文件或者docker tar原始文件。 docker-compose up …

DataGrip2024安装包(亲测可用)

目录 一、软件简介 二、软件下载 一、软件简介 DataGrip是由JetBrains公司开发的一款强大的关系数据库集成开发环境&#xff08;IDE&#xff09;&#xff0c;专为数据库开发人员和数据库管理员设计。它提供了一个统一的界面&#xff0c;用于管理和开发各种关系型数据库&#x…

用于半监督的图扩散网络 笔记

1 Title Graph Neural Diffusion Networks for Semi-supervised Learning&#xff08;Wei Ye, Zexi Huang, Yunqi Hong, and Ambuj Singh&#xff09;【2022】 2 Conclusion This paper proposes a new graph neural network called GND-Nets (for Graph Neural Diffu…

计算股价波动率python

上述图片上传gemini&#xff0c;提问&#xff1a;转换为python代码 好的&#xff0c;以下是您发送的图像中公式的 Python 代码&#xff1a; python def stock_volatility(prices, opening_prices, N): """ 计算股票价格的波动率。 参数&#xff1a; p…

vscode如何方便地添加todo和管理todo

如果想在vscode中更加方便的添加和管理TODO标签&#xff0c;比如添加高亮提醒和查看哪里有TODO标签等&#xff0c;就可以通过安装插件快速实现。 安装插件 VSCode关于TODO使用人数最多的插件是TODO Height和Todo Tree 按住 CtrlShiftX按键进入应用扩展商店&#xff0c;输入to…

潮玩宇宙小程序定制大逃杀游戏APP开发H5游戏

游戏名称&#xff1a;潮玩宇宙大逃杀 游戏类型&#xff1a;休闲竞技类小游戏 游戏目标&#xff1a;玩家通过选择房间躲避杀手&#xff0c;生存下来并瓜分被杀房间的元宝。 核心功能 房间选择&#xff1a;玩家进入游戏后&#xff0c;可以选择一间房间躲避杀手。杀手行动&…

机器学习——自动驾驶

本章我们主要学习以下内容: 阅读自动驾驶论文采集数据根据论文搭建自动驾驶神经网络训练模型在仿真环境中进行自动驾驶 论文介绍 本文参考自2016年英伟达发表的论文《End to End Learning for Self-Driving Cars》 📎end2end.pdf

c语言中的数组

数组 数组是一种构造类型&#xff0c;是由基本类型构造而成。当我们想用一群变量来描述同一类相同的东西时候&#xff0c;比如100个年龄变量&#xff0c;我们可以这样int age1&#xff1b;int age2&#xff1b;int age3&#xff1b;……int age 100;这样即不方便书写&#xff…

通过腾讯云搭建跨境电商demo的详细操作过程(建站系统 保姆级指导,巨详细)

引言&#xff1a; 有许多做跨境电商的朋友&#xff0c;或者为跨境电商服务的小企业&#xff0c;都会面临搭建电商平台V1.0的问题 因此&#xff0c;花了点时间&#xff0c;找了一个开源的项目&#xff0c;让大家可以跑起来&#xff0c;一方面了解平台都有哪些模块&#xff0c;另…

揭秘ebay、亚马逊测评系统:从稳定环境搭建到防关联技术

在亚马逊、ebay平台上进行自养号测评、L ka等活动&#xff0c;首要问题是确保环境的安全性和稳定性。一个稳定的环境是进行测评的基础&#xff0c;如果无法解决安全性问题&#xff0c;那么从事这些项目就不值得。我们在环境技术研发领域已经有8年的经验&#xff0c;在早期测试了…

创建k8s deploy yaml文件的imagePullSecrets语句

镜像仓库是harbor kubectl create secret docker-registry key --docker-server192.168.0.190 --docker-usernameadmin --docker-passwordHarbor12345

Lagent AgentLego 智能体介绍

本文主要介绍智能体相关基础知识&#xff0c;主流的智能体开源项目&#xff0c;重点介绍Lagent智能体和AgentLego框架。 一. 为什么要有智能体 目前的大预言模型有一些局限性&#xff0c;包括有时候会生成虚假信息&#xff0c;也就是我们说的“大模型胡言乱语”&#xff0c;还…

LeetCode 每日一题 Day 123-136

1379. 找出克隆二叉树中的相同节点 给你两棵二叉树&#xff0c;原始树 original 和克隆树 cloned&#xff0c;以及一个位于原始树 original 中的目标节点 target。 其中&#xff0c;克隆树 cloned 是原始树 original 的一个 副本 。 请找出在树 cloned 中&#xff0c;与 tar…

虚拟机下如何使用Docker(完整版)

Docker详细介绍&#xff1a; Docker 是一款开源的应用容器引擎&#xff0c;由Docker公司最初开发并在2013年发布。Docker的核心理念源自于操作系统级别的虚拟化技术&#xff0c;尤其是Linux上的容器技术&#xff08;如LXC&#xff09;&#xff0c;它为开发人员和系统管理员提供…

字体反爬积累知识

目录 一、什么是字体反扒 二、Unicode编码 三、利用font包获取映射关系 一、什么是字体反扒 字体反爬是一种常见的反爬虫技术&#xff0c;它通过将网页中的文本内容转换为特殊的字体格式来防止爬虫程序直接获取和解析文本信息。字体反爬的原理是将常规的字符映射到特殊的字…

【Web】Dest0g3 520迎新赛 题解(全)

目录 phpdest EasyPHP SimpleRCE funny_upload EasySSTI middle PharPOP ezip NodeSoEasy Really Easy SQL&easysql EzSerial ljctr phpdest 尝试打pearcmd&#xff0c;但似乎没有写文件的权限 ?config-create/&file/usr/local/lib/php/pearcmd.php&a…

STM32H7通用定时器计数功能的使用

目录 概述 1 STM32定时器介绍 1.1 认识通用定时器 1.2 通用定时器的特征 1.3 递增计数模式 1.4 时钟选择 2 STM32Cube配置定时器时钟 2.1 配置定时器参数 2.2 配置定时器时钟 3 STM32H7定时器使用 3.1 认识定时器的数据结构 3.2 计数功能实现 4 测试案例 4.1 代码…

2024蓝桥杯每日一题(最大公约数)

备战2024年蓝桥杯 -- 每日一题 Python大学A组 试题一&#xff1a;公约数 试题二&#xff1a;最大公约数 试题三&#xff1a;等差数列 试题四&#xff1a;最大比例 试题五&#xff1a;Hankson的趣味题 试题一&#xff1a;公约数 【题目描述】 …

小红书搜索团队提出新解码策略,降低大模型推理成本

如何让大语言模型&#xff08;LLMs&#xff09;“智能涌现”&#xff1f;关键技术之一是思维链&#xff08;Chain of Thought&#xff0c;CoT&#xff09;&#xff0c;它通过引导大模型&#xff0c;一步一步模拟人类思考过程&#xff0c;可有效增强大模型的逻辑推理能力。 而自…