网站小样用什么做,甘肃省崇信县门户网,深圳市建设注册中心网站,重庆平台网站建设企业实验目的和要求
请完成创建图片库应用#xff0c;显示一系列预设的图片。 提供按钮来切换显示不同类别的图片。 二、实验步骤与结果#xff08;给出对应的代码或运行结果截图#xff09;
1.WXML
view button bindtapshowAll所有图片/but…实验目的和要求
请完成创建图片库应用显示一系列预设的图片。 提供按钮来切换显示不同类别的图片。 二、实验步骤与结果给出对应的代码或运行结果截图
1.WXML
view button bindtapshowAll所有图片/button button bindtapshowAnimals动物/button button bindtapshowNature自然/button view classimage-list block wx:for{{show}} wx:keyindex image src{{item.url}} modewidthFix/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/u622413623,4084455738fm253fmtautoapp138fJPEG?w500h1082, type: animal }, { url: https://img2.baidu.com/it/u2614849573,2966135114fm253fmtautoapp138fJPEG?w500h888, type: nature }, { url: https://img2.baidu.com/it/u2829124655,2639685270fm253fmtautoapp138fJPEG?w889h500, type: animal } ], show: [] // }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, showAll(){ this.setData({ show:this.data.images }) }, showAnimals() { const show_animalthis.data.images.filter(imagesimages.type animal) this.setData({ show:show_animal }); }, showNature() { const show_naturethis.data.images.filter(imagesimages.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 classimage-list
1.2 添加功能按钮 在页面的顶部我们添加了三个button组件每个按钮通过bindtap事件绑定到相应的函数用于控制下方图片列表的显示内容
第一个按钮所有图片当点击时触发showAll函数显示所有图片。 button bindtapshowAll所有图片/button 第二个按钮动物当点击时触发showAnimals函数仅显示属于动物类别的图片。 button bindtapshowAnimals动物/button 第三个按钮自然当点击时触发showNature函数仅显示属于自然类别的图片。 button bindtapshowNature自然/button
1.3 设置图片展示区 在按钮下方设置了一个类名为“image-list”的view组件作为图片展示区。这个区域使用了block容器来循环渲染filteredImages数组中的每一项 block wx:for{{filteredImages}} wx:keyindex /block 每个block组件包含一个image组件用于显示单个图片。 image组件的src属性绑定到数组项的url属性这样每个图片的链接都是动态加载的。 image src{{item.url}} modewidthFix/image 图片使用modewidthFix属性确保图片的宽度自适应容器宽度
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/u622413623,4084455738fm253fmtautoapp138fJPEG?w500h1082 https://img2.baidu.com/it/u2614849573,2966135114fm253fmtautoapp138fJPEG?w500h888 https://img2.baidu.com/it/u2829124655,2639685270fm253fmtautoapp138fJPEG?w889h500
