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

实验目的和要求

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

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

 

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

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.hqwc.cn/news/625674.html

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

相关文章

javase__进阶 day14 IO(异常File综合案例)

1. 异常 1.1 异常概念 异常&#xff0c;就是不正常的意思。在生活中:医生说,你的身体某个部位有异常,该部位和正常相比有点不同,该部位的功能将受影响.在程序中的意思就是&#xff1a; 异常 &#xff1a;指的是程序在执行过程中&#xff0c;出现的非正常的情况&#xff0c;最…

学浪视频怎么保存到本地

学浪怎么保存到本地?快来看看这个小浪助手 我写了将近2000多行代码&#xff0c;使用易语言编写的 这里给大家我打包好的工具&#xff0c;有需要的自己取一下 学浪下载器链接&#xff1a;https://pan.baidu.com/s/1y7vcqILToULrYApxfEzj_Q?pwdkqvj 提取码&#xff1a;kqvj…

error: failed to push some refs to ‘https://gitee.com/zhao-zhimin12/gk.git‘

git push origin master发现以下报错: 解决办法: 一、强制推送 git push origin master -f &#xff08;加上 -f 就是强制&#xff09; 二、 先拉取最新代码&#xff0c;再推送 1.git pull origin master 2.git push origin master

【Web】2022DASCTF Apr X FATE 防疫挑战赛 题解(全)

目录 warmup-php soeasy_php warmup-java warmup-php spl_autoload_register函数实现了当程序遇到调用没有定义过的函数时&#xff0c;会去找./class/函数名.php路径下的php文件&#xff0c;并把它包含在程序中。 拿到附件拖进Seay里自动审计一下 显然利用终点为evaluateExp…

vue:如何通过两个点的经纬度进行距离的计算(很简单)

首先假设从api获取到了自己的纬经度和别人的纬经度 首先有一个概念需要说一下 地球半径 由于地球不是一个完美的球体&#xff0c;所以并不能用一个特别准确的值来表示地球的实际半径&#xff0c;不过由于地球的形状很接近球体&#xff0c;用[6357km] 到 [6378km]的范围值可以…

基于小程序实现的餐饮外卖系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…

2024年管理科学、电子商务与应用国际会议(ICMSECA2024)

2024年管理科学、电子商务与应用国际会议(ICMSECA2024) 会议简介 2024年管理科学、电子商务和应用国际会议&#xff08;ICMSCA2024&#xff09;旨在为来自世界各地的研究专家建立一个国际论坛&#xff0c;展示他们在知识管理系统领域的想法和经验&#xff0c;同时为世界各地的…

在Visual Studio配置C++的netCDF库的方法

本文介绍在Windows电脑的Visual Studio软件中&#xff0c;配置C 语言最新版netCDF库的方法。 netCDF&#xff08;Network Common Data Form&#xff09;是一种用于存储、访问和共享科学数据的文件格式和库&#xff0c;其提供了一种灵活的方式来组织、描述和存储多维数据&#…

接口测试——postman

一.下载与安装 https://www.getPostman.com/ 界面导航说明 二.get请求 第一个get请求 批量执行接口请求&#xff1a; 1. 右击run collection 2. 会出现runner标签页 携带参数的GET请求 所谓的查询参数&#xff0c;其实就是URL地址中问号&#xff08;?&#xff09;后面的部分…

Docker应用推荐个人服务器实用有趣的项目推荐

Wallabag&#xff1a;是一个开源的、自托管的文章阅读和保存工具。它允许你保存网页文章并进行离线阅读&#xff0c;去除广告和不必要的内容&#xff0c;以提供更好的阅读体验。Wallabag支持多种导入和导出格式&#xff0c;并提供了一些实用的功能&#xff0c;如标签、阅读列表…

定制k8s域名解析------CoreDns配置实验

定制k8s域名解析------CoreDns配置实验 1. 需求 k8s集群内通过CoreDns互相解析service名. 同时pana.cn域为外部dns解析,需要通过指定dns服务器进行解析 再有3个服务器,需要使用A记录进行解析 2. K8s外DNS服务器 查看解析文件 tail -3 /var/named/pana.cn.zone 解析内容 ww…

go限流、计数器固定窗口算法/计数器滑动窗口算法

go限流、计数器固定窗口算法/计数器滑动窗口算法 一、问题 问题1&#xff1a;后端接口只能支撑每10秒1w个请求&#xff0c;要怎么来保护它呢&#xff1f; 问题2&#xff1a;发短信的接口&#xff0c;不超过100次/时&#xff0c;1000次/24小时&#xff0c;要怎么实现&#xff…