小程序样例2：简单图片分类查看

news2025/2/23 0:38:08

基本功能：

1、根据分类展示图片，点击类目切换图片：

2、点击分类编辑，编辑分类显示：

3、点击某个分类，控制主页该分类显示和不显示：

类目2置灰后，主页不再显示

4、点击分类跳转到具体的分类目录

5、点击二级分类，预览图片

源码实现

主页index：

获取类目数据，选择某个类目时，获取对应类目下的图片列表。

因为有类目编辑，数据会发生变化，某个类目显示和隐藏后，主页要重新获取数据；

index.js

//index.js
//获取应用实例
var app = getApp()

Page({
   data: {
    contentList:[], // 当前类目图片列表
    currentType:wx.getStorageSync('currentType'),
    types:[]
  },

  onShow() {
    // types 会发生变化，放在onload中不合适
    console.log("onShow")
    let types = wx.getStorageSync("types");
    console.log(types)
    if (!types) {
      types = app.globalData.types;
    } 
    console.log(types)
    this.setData({types: types})
    if(!this.data.currentType){
      let that = this
      types.every(function(item){
        if(item.is_show){
            wx.setStorageSync('currentType', item.value)
            that.setData({currentType:item.value})
            return false
          }else{
            return true
          }
      })
    }
    
    if(this.data.currentType){
        this.getList(this.data.currentType)
    }
  },

  onLoad:function(){
    
  },
  getList:function(type){
    // 获取不同类型的图片
    console.log(type)
    let list = app.globalData.contentList1;
    if (type == 'leimu1') {
      list = app.globalData.contentList1;
    } else if (type == 'leimu2') {
      list = app.globalData.contentList2;
    } else if (type == 'leimu3') {
      list = app.globalData.contentList3;
    }
    this.setData({contentList: list});
  },
  //点击某一个title条
  changeType:function(e){
    var type = e.currentTarget.dataset.value
    if(type == this.data.currentType){
      return;
    }
    this.setData({currentType:type})
    app.globalData.currentType = type
    this.getList(type)
  },
  gotoTypeEdit:function(e){
    wx.navigateTo({
      url: '../types/types',
    })
  },
  gotoAlbum:function(e){
    console.log("gotoAlbum");
    let param = e.currentTarget.dataset, 
    title = param.title, 
    id=param.id.replace(/[^0-9]/ig,"")
    console.log("param: " + param);
    console.log("title: " + title);
    console.log("id: " + id);
    var url = "../album/album?title="+title+"&id="+id;
    console.log("ready");
    wx.navigateTo({
      url:url,
      success: function(res){
        console.log('跳转到news页面成功')// success
      },
      fail: function() {
      console.log('跳转到news页面失败')  // fail
      },
      complete: function() {
        console.log('跳转到news页面完成') // complete
      }
    })
  }
})

index.wxml

<!--index.wxml-->
<view class="container">
  <!--nav  bar-->
  <view class="nav_bar">
    <scroll-view class="nav_bar_scroll" scroll-x="true">
      <block wx:for="{{types}}" wx:key="title" wx:for-item="type">
        <block wx:if="{{type.is_show}}">
          <view bindtap="changeType" class="{{type.value == currentType ? 'current' : ''}} scroll_item" data-value="{{type.value}}">{{type.title}}</view>
        </block>
      </block>
    </scroll-view>
    <view class="edit_nav_bar" bindtap="gotoTypeEdit">
        <image class="edit_nav_bar_btn" src="/image/nav_bar_edit.png"></image>  
    </view>
  </view>
 
  <!--beauty list content-->
  <view class="content">
    <block wx:for="{{contentList}}" wx:key="href">
      <view class="beauty_item" data-id="{{item.href}}" data-title="{{item.title}}" bindtap="gotoAlbum">
        <image src="{{item.thumbSrc}}" mode="aspectFit"></image>
        <text>{{item.title}}</text>
    </view>
    </block>
    
  </view>
  
  
</view>

index.wxss

.nav_bar{
    box-sizing:border-box;
    position: fixed;
    top: 0px;
    left:0px;
    width: 100%;
    border-bottom: 1px solid #D5D5D5;
    display: flex;
    background-color: #ffffff;
    z-index: 1000;
}
.nav_bar_scroll{
    flex:1;
    font-size:30rpx;
    width: 100rpx;
    height: 90rpx;
    box-sizing: border-box;
    white-space: nowrap;
}
.scroll_item{
    display: inline-block;
    padding: 0 20rpx;
    line-height:90rpx;
}
.nav_bar_scroll .current{
    color:#BE304D;
}
.edit_nav_bar{
    margin: 20rpx 0 0 0;
    height: 50rpx;
    width:70rpx;
    border-left:1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}
.edit_nav_bar_btn{
    width: 50rpx;
    height: 50rpx;
}
.content{
    margin: 90rpx 0 0 0;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
}
.beauty_item{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:345rpx;
    margin: 0 0 20rpx 0;
}
.beauty_item image{
    width: 100%;
    height: 450rpx;
}
.beauty_item text{
    
    display: block;
    font-size:28rpx;
    color:#000000;
    line-height: 40rpx;
    height: 80rpx;
    overflow: hidden;
}

类目编辑types：

types.js

var app = getApp()

Page({
    data:{
      types: app.globalData.types
    },
    onLoad:function(){
      if (wx.getStorageSync('types')) {
        this.setData({types: wx.getStorageSync('types')})
      } 
    },
    changeTypeStatus:function(e){
        var value = e.currentTarget.dataset.value
        var currentType = wx.getStorageSync('currentType') 
        var showCount = 0, isCurrentHide = false
        var types = this.data.types.map(function(item){
            if(item.value == value){
                item.is_show = !item.is_show
                if(value == currentType && !item.is_show){
                    isCurrentHide = true;
                }
            }
            if(item.is_show){
                showCount++;
            }
            return item
        })
        //当前选中的被隐藏了
        if(showCount < 1){
          wx.showToast({title: "不能全部隐藏", icon:"none",})
            return;
        }
        if(isCurrentHide){
            types.every(function(item){
                if(item.is_show){
                     wx.setStorageSync('currentType', item.value)
                     return false
                }else{
                    return true
                }
            })
        }
        this.setData({types:types})
        app.globalData.types = types;
        wx.setStorageSync("types", types)
    }
})

types.wxml

<view class="container">
    <view class="tips">
        点击可切换标签状态[深色显示，灰色为隐藏]
    </view>
    <view class="type-content">
        <block wx:for="{{types}}" wx:for-item="type" wx:key="title">
            <view data-value="{{type.value}}" class="type-item {{type.is_show ? 'type-item-show' : 'type-item-hide'}}" bindtap="changeTypeStatus">
                {{type.title}}
            </view>
        </block>
    </view>
</view>

types.wxss

.tips{
    box-sizing: border-box;
    background-color: #E6E6E6;
    line-height: 80rpx;
    font-size:30rpx;
    padding: 0 20rpx;
    width: 750rpx;
}
.type-content{
    padding: 25rpx 25rpx;
    display: flex;
    flex-flow:row wrap;
}
.type-item{
    width:155rpx;
    text-align: center;
    font-size:30rpx;
    line-height: 80rpx;
    margin: 20rpx 10rpx;
}
.type-item-show{
    background-color: #BE304D;
    color:#ffffff;
}
.type-item-hide{
    background-color: #E6E6E6;
    color:#C4C4C4;
}

类目详情album：

album.js

var app = getApp()

Page({
    data:{
        album:[],
        albumUrlList: [], // 点击预览的图片列表 每个分类图片不同需要设置数据
        imgObjList:app.globalData.imgList,
        total:0,
        albumCount: 0,
        title:'',
        id:'',
        countShow:true,
        currentIndex:1
    },
    onLoad:function(options){
      console.log(this.data.imgObjList)
       this.setData({
         title: options.title,
         total: this.data.imgObjList.length})
    },
    onReady:function(){
        wx.setNavigationBarTitle({title:this.data.title})
    },

    imageload:function(e){
      // 图片加载预处理
    },
    preiviewwImage(e){
      console.log(e.currentTarget.dataset)
      let albumUrlList = e.currentTarget.dataset.item.albumUrlList
      wx.previewImage({
        current:albumUrlList[0],
        urls:albumUrlList
      })
    },
    hideCount:function(){
      this.setData({countShow:false})
    }
})

album.wxml

<view class="container">
    <scroll-view scroll-y="true" class="image-list-wrap">
    <block wx:for="{{imgObjList}}" wx:key="id" wx:item="{{item}}">
        <view>
        <image bindtap="preiviewwImage" mode="aspectFit" src="{{item.imgSrc}}" data-item="{{item}}" data-index="{{index}}" style="width:{{item.w}}rpx;height:{{item.h}}rpx"/>
        </view>
    </block>
</scroll-view>
    <!--图片数目-->
    <block wx:if="{{countShow}}">
        <view class="albumCount" bindtap="hideCount">
        {{total}}
        </view>
    </block>
</view>

album.wxss

.image-list-wrap{
    width: 100%;
}
.albumCount{
    width: 120rpx;
    height:120rpx;
    border-radius: 50%;
    background-color: #BE304D;
    color:#ffffff;
    position: fixed;
    right:30rpx;
    top:30rpx;
    font-size:35rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

全局数据：

app.js

//app.js
App({
  onLaunch: function () {

  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    api:{
      listBaseUrl:"https://route.showapi.com/959-1?showapi_appid=25744&showapi_sign=f3807528bd5d4a4ea6b2027e8286e0dc&type=",
      albumBaseurl:"https://route.showapi.com/959-2?id=%id%&showapi_appid=25744&showapi_sign=f3807528bd5d4a4ea6b2027e8286e0dc",
      meizhiurl:"http://meizhitu.applinzi.com/",
    },
    currentType:'',
    types:[
      {
        title:"类目1",
        value:"leimu1",
        is_show:true
      },
      {
        title:"类目2",
        value:"leimu2",
        is_show:true
      },
      {
        title:"类目3",
        value:"leimu3",
        is_show:true
      }
    ],
    contentList1:[
      {'href':'001',
      'title':'pic01',
      'thumbSrc':'https://img1.baidu.com/it/u=1626917682,1417287895&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
      },
      {'href':'002',
      'title':'pic02',
      'thumbSrc':'https://img95.699pic.com/xsj/0s/o9/53.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast'
      },
      {'href':'003',
      'title':'pic03',
      'thumbSrc':'https://t8.baidu.com/it/u=3762038486,3670950445&fm=193'
      },
      {'href':'004',
      'title':'pic04',
      'thumbSrc':'https://img95.699pic.com/xsj/0c/sn/m6.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast'
      }
    ],
    contentList2:[
      {'href':'001',
      'title':'pic01',
      'thumbSrc':'https://img2.baidu.com/it/u=3727720492,1405473130&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
      },
      {'href':'002',
      'title':'pic02',
      'thumbSrc':'https://img01.jituwang.com/161108/257309-16110Q5444017.jpg'
      },
      {'href':'003',
      'title':'pic03',
      'thumbSrc':'https://img95.699pic.com/xsj/18/jv/lk.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast'
      },
      {'href':'004',
      'title':'pic04',
      'thumbSrc':'https://img95.699pic.com/xsj/0s/a1/fc.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast'
      }
    ],
    contentList3:[
      {'href':'001',
      'title':'pic01',
      'thumbSrc':'https://img95.699pic.com/xsj/06/ok/x7.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast'
      },
      {'href':'002',
      'title':'pic02',
      'thumbSrc':'https://img95.699pic.com/xsj/0s/o9/53.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast'
      },
      {'href':'003',
      'title':'pic03',
      'thumbSrc':'https://img95.699pic.com/xsj/0b/3p/uu.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast'
      },
      {'href':'004',
      'title':'pic04',
      'thumbSrc':'https://img95.699pic.com/xsj/1l/ys/dz.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast'
      }
    ],
    imgList: [
      {'id':1,
       'imgSrc':'https://t7.baidu.com/it/u=3797771203,3932368528&fm=193&f=GIF',
        w:750,
        h:375,
        albumUrlList: ['https://t7.baidu.com/it/u=2340400811,4174965252&fm=193&f=GIF', 'https://t7.baidu.com/it/u=3379862688,946992288&fm=193&f=GIF']
      },
      {'id':2,
       'imgSrc':'https://t7.baidu.com/it/u=1522757721,1408622889&fm=193&f=GIF',
        w:750,
        h:375,
        albumUrlList: ['https://t7.baidu.com/it/u=613125779,842332090&fm=193&f=GIF', 'https://t7.baidu.com/it/u=2784816167,2846782825&fm=193&f=GIF']
      },
      {'id':3,
       'imgSrc':'https://t7.baidu.com/it/u=3929020656,3513462146&fm=193&f=GIF',
        w:750,
        h:375,
        albumUrlList: ['https://t7.baidu.com/it/u=1395795138,3058754288&fm=193&f=GIF', 'https://t7.baidu.com/it/u=4022230151,492212515&fm=193&f=GIF']
      }
    ],
  }
  
})

app.json

{
  "pages":[
    "pages/index/index",
    "pages/album/album",
    "pages/types/types"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#BE304D",
    "navigationBarTitleText": "图片查看",
    "navigationBarTextStyle":"white"
  },
  "debug":false
}

app.wxss

/**app.wxss**/
page{
  height: 100%;
}
.container {
  min-height: 100%;
  box-sizing: border-box;
  position: relative;
}

图片都是从百度图片地址，实际以项目后台接口返回为准。

个人小程序创业项目   #小程序://朋友圈子/VMEWRjrOTum4Soa  有想法的朋友可以一起交流下~

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

大数据开发之kafka（完整版）

大数据开发之kafka（完整版）

第 1 章&#xff1a;Kafka概述 1.1 定义 Kafka是一个分布式的基于发布/订阅模式的消息队列&#xff0c;主要应用于大数据实时处理领域。 发布/订阅&#xff1a;消息的发布者不会将消息直接发送给特定的订阅者&#xff0c;而是将发布的消息分为不同的类别&#xff0c;订阅者只…
阅读更多...
Linux系统安装Samba服务器

Linux系统安装Samba服务器

在实际开发中&#xff0c;我们经常会有跨系统之间文件传递的需求&#xff0c;Samba 便是能够在 Windows 和 Linux 之间传递文件的服务&#xff0c;功能也是非常强大和好用&#xff0c;本篇文章将介绍如何在 Linux 系统上安装 Samba 服务&#xff0c;以 CentOS7 系统为例。 一、…
阅读更多...
Java强软弱虚四大引用

Java强软弱虚四大引用

文章目录 一、强引用二、软引用三、弱引用四、虚引用 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、强引用 在Java中&#xff0c;强引用&#xff08;Strong Reference&#xff09;是最常见的引用类型。当我们创建一个对象并将其赋值给一个变量时…
阅读更多...
Spring Boot整合Spring Security：构建安全的Web应用

Spring Boot整合Spring Security：构建安全的Web应用

文章目录 1. 添加依赖2. 配置Spring Security3. 创建用户服务4. 控制器和视图5. 运行应用 Spring Security是一个强大的身份验证和访问控制框架&#xff0c;用于保护Spring应用程序。它提供了全面的安全服务&#xff0c;包括身份验证、授权、攻击防护等。本文将介绍如何在Spr…
阅读更多...
让uniapp小程序支持多色图标icon：iconfont-tools-cli

让uniapp小程序支持多色图标icon：iconfont-tools-cli

前景&#xff1a; uniapp开发小程序项目时&#xff0c;对于iconfont多色图标无法直接支持&#xff1b;若将多色icon下载引入项目则必须关注包体&#xff0c;若将图标放在oss或者哪里管理&#xff0c;加载又是一个问题&#xff0c;因此大多采用iconfont-tools工具&#xff0c;但…
阅读更多...
原码，补码的除法

原码，补码的除法

目录 一.原码的除法 &#xff08;1&#xff09;恢复余数法 重点看这 &#xff08;2&#xff09;不恢复余数法&#xff08;加减交替法&#xff09; 重点看这 二. 补码除法运算 重点看这 我们已经学习了如何进行原码&#xff0c;补码的乘法&#xff1a; http://t.csdnimg…
阅读更多...
【代码整理】基于COCO格式的pytorch Dataset类实现

【代码整理】基于COCO格式的pytorch Dataset类实现

import模块 import numpy as np import torch from functools import partial from PIL import Image from torch.utils.data.dataset import Dataset from torch.utils.data import DataLoader import random import albumentations as A from pycocotools.coco import COCO …
阅读更多...
Spring MVC精解：技术内幕与最佳实践

Spring MVC精解：技术内幕与最佳实践

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;咱们今天来聊聊Spring MVC&#xff0c;它是Spring的一个模块&#xff0c;专门用来构建Web应用程序。提供了一种轻量级的方式来构建动态网页。就像小黑我刚开始接触Java时候一样&#xff0c;可能对这些听起来很高…
阅读更多...
GitHub 一周热点汇总第6期(2024/01/14-01/20)

GitHub 一周热点汇总第6期(2024/01/14-01/20)

GitHub一周热点汇总第6期 (2024/01/14-01/20) &#xff0c;梳理每周热门的GitHub项目&#xff0c;这一周的热门项目中AI的比重难得的变低了&#xff0c;终于不像一个AI热门项目汇总了&#xff0c;一起来看看都有哪些项目吧。 #1Maybe 项目名称&#xff1a;Maybe - 个人理财应…
阅读更多...
4496 蓝桥杯 求函数零点 简单

4496 蓝桥杯 求函数零点 简单

4496 蓝桥杯 求函数零点 简单 //C风格解法1&#xff0c;通过率100% #include <bits/stdc.h> // int a, b; 一定会自动初始化为 0int main(){int a 2, b 3; // 定义a&#xff0c;b&#xff0c;不会自动初始化&#xff0c;最好自己定义时初始化// windows环境下a值固定&…
阅读更多...
Broadcom交换芯片56620架构

Broadcom交换芯片56620架构

文章目录 架构1.系统逻辑视图2.逻辑芯片视图3.芯片框图4.MIIM&#xff08;Medium Independent Interface Management&#xff09;5.交换结构6.CAP 架构 1.系统逻辑视图 Ingress Chip作用&#xff1a; 解析报文128字节的头部&#xff08;MMU&#xff08;Memory Management Uni…
阅读更多...
html5实现好看的年会邀请函源码模板

html5实现好看的年会邀请函源码模板

文章目录 1.设计来源1.1 邀请函主界面1.2 诚挚邀请界面1.3 关于我们界面1.4 董事长致词界面1.5 公司合作方界面1.6 活动流程界面1.7 加盟支持界面1.8 加盟流程界面1.9 加盟申请界面1.10 活动信息界面 2.效果和源码2.1 动态效果2.2 源码目录结构 源码下载 作者&#xff1a;xcLei…
阅读更多...
dpwwn:03

dpwwn:03

靶场下载 https://download.vulnhub.com/dpwwn/dpwwn-03.zip 信息收集 # nmap -sn 192.168.1.0/24 -oN live.nmap Starting Nmap 7.94 ( https://nmap.org ) at 2024-01-17 21:18 CST Stats: 0:00:00 elapsed; 0 hosts completed (0 up), 255 undergoing ARP Ping Sc…
阅读更多...
力扣：494. 目标和（动态规划）（01背包）

力扣：494. 目标和（动态规划）（01背包）

题目&#xff1a; 给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 ‘’ 或 ‘-’ &#xff0c;然后串联起所有整数&#xff0c;可以构造一个 表达式 例如&#xff0c;nums [2, 1] &#xff0c;可以在 2 之前添加 ‘’ &#xff0c;在 1 之前添加…
阅读更多...
【设计模式】什么是外观模式并给出例子！

【设计模式】什么是外观模式并给出例子！

什么是外观模式&#xff1f; 外观模式是一种结构型设计模式&#xff0c;主要用于为复杂系统、库或框架提供一种简化的接口。这种模式通过定义一个包含单个方法的高级接口&#xff0c;来隐藏系统的复杂性&#xff0c;使得对外的API变得简洁并易于使用。 为什么要使用外观模式&a…
阅读更多...
Leetcode的AC指南 —— 栈与队列：225.用队列实现栈

Leetcode的AC指南 —— 栈与队列：225.用队列实现栈

摘要&#xff1a; **Leetcode的AC指南 —— 栈与队列&#xff1a;225.用队列实现栈 **。题目介绍&#xff1a;请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、pop 和 empty&#xff09;。 …
阅读更多...
【flutter】完全自定义样式模态对话框

【flutter】完全自定义样式模态对话框

示例完成结果展示&#xff1a; 示例组件代码&#xff1a; context&#xff1a;上下文 title&#xff1a;提示标题&#xff0c;null时不显示 content&#xff1a;提示内容&#xff0c;null时不显示 cancelText&#xff1a;取消按钮文字&#xff0c;null时不显示取消按钮 confirm…
阅读更多...
Canny边缘检测 双阈值检测理解

Canny边缘检测 双阈值检测理解

问题引入 我们用一个实际例子来引入问题 import cv2 import numpy as npimgcv2.imread("test.png",cv2.IMREAD_GRAYSCALE) # 修改图像大小 show cv2.resize(img,(500,500))v1cv2.Canny(show,120,250) v2cv2.Canny(show,50,100)# 连接图像 res np.hstack((v1,v2)…
阅读更多...
MSPM0L1306例程学习-UART部分(2)

MSPM0L1306例程学习-UART部分(2)

MSPM0L1306例程学习系列 1.背景介绍 写在前边的话&#xff1a; 这个系列比较简单&#xff0c;主要是围绕TI官网给出的SDK例程进行讲解和注释。并没有针对模块的具体使用方法进行描述。所有的例程均来自MSPM0 SDK的安装包&#xff0c;具体可到官网下载并安装: https://www.ti…
阅读更多...
java枚举详细解释

java枚举详细解释

枚举的基本认识 我们一般直接定义一个单独的枚举类 public enum 枚举类名{枚举项1,枚举项2,枚举项3 } 可以通过 枚举类名.枚举项 来访问该枚举项的 - 可以理解为 枚举项就是我们自己定义的一个数据类型,是独一无二的 接下来我们直接用一个例子来完全理解 加深理解 这里…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023