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

基本功能:

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  有想法的朋友可以一起交流下~

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

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

相关文章

【C++语言1】基本语法

前言 &#x1f493;作者简介&#xff1a; 加油&#xff0c;旭杏&#xff0c;目前大二&#xff0c;正在学习C&#xff0c;数据结构等&#x1f440; &#x1f493;作者主页&#xff1a;加油&#xff0c;旭杏的主页&#x1f440; ⏩本文收录在&#xff1a;再识C进阶的专栏&#x1…

Python语法进阶——类

Python中的数据类型都属于类。int、str、list都是Python定义好的数据类型类。 print(type(list))#<class type> print(type(list()))#<class list> 一、自定义数据类型 一、语法 class 类名():pass #类名 要求首字母大写 #()可写可省略。 #pass在这里只是用来保证…

推荐IDEA一个小插件,实用性很高!!

插件&#xff1a; Convert YAML and Properties File 由于每个人的开发习惯不同&#xff0c;在开发过程中会遇到各种小细节的问题。今天给大家介绍一个小插件&#xff0c;作用不大&#xff0c;细节很足。 就是properties类型文件和yml文件互相自由转换 解决&#xff1a;…

2023年DevOps国际峰会暨 BizDevOps 企业峰会(DOIS北京站):核心内容与学习收获(附大会核心PPT下载)

随着科技的飞速发展&#xff0c;软件开发的模式和流程也在不断地演变。在众多软件开发方法中&#xff0c;DevOps已成为当下热门的软件开发运维一体化模式。特别是在中国&#xff0c;随着越来越多的企业开始认识到DevOps的价值&#xff0c;这一领域的研究与实践活动日益活跃。本…

计算机网络——运输层(2)暨小程送书

计算机网络——运输层&#xff08;2&#xff09;暨小程送书 小程一言专栏链接: [link](http://t.csdnimg.cn/ZUTXU) 运输层&#xff08;2&#xff09;TCP/IP对比TCP&#xff08;传输控制协议&#xff09;&#xff1a;IP&#xff08;互联网协议&#xff09;&#xff1a;总结 拥塞…

【设计模式】适配器和桥接器模式有什么区别?

今天我探讨一下适配器模式和桥接模式&#xff0c;这两种模式往往容易被混淆&#xff0c;我们希望通过比较他们的区别和联系&#xff0c;能够让大家有更清晰的认识。 适配器模式&#xff1a;连接不兼容接口 当你有一个类的接口不兼容你的系统&#xff0c;而你又不希望修改这个…

RabbitMQ的安装使用

RabbitMQ是什么&#xff1f; MQ全称为Message Queue&#xff0c;消息队列&#xff0c;在程序之间发送消息来通信&#xff0c;而不是通过彼此调用通信。 RabbitMQ 主要是为了实现系统之间的双向解耦而实现的。当生产者大量产生数据时&#xff0c;消费者无法快速消费&#xff0c;…

公网环境调试本地配置的Java支付宝沙箱环境模拟支付场景

文章目录 前言1. 下载当面付demo2. 修改配置文件3. 打包成web服务4. 局域网测试5. 内网穿透6. 测试公网访问7. 配置二级子域名8. 测试使用固定二级子域名访问 前言 在沙箱环境调试支付SDK的时候&#xff0c;往往沙箱环境部署在本地&#xff0c;局限性大&#xff0c;在沙箱环境…

【Proteus仿真】【51单片机】遥控小风扇设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器&#xff0c;使用数码管显示模块、L298N电机驱动模块、按键、直流电机风扇、红外遥控等。 主要功能&#xff1a; 系统运行后&#xff0c;数码管显示风扇速度档位&a…

【操作系统】实验二 Proc文件系统

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…

FluoroQuest抗淬灭试剂盒I 适合载玻片成像,能够提高荧光信号的强度和稳定性

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;FluoroQuestAnti-fading Kit I Optimized for Slide Imaging&#xff0c;FluoroQuest抗淬灭试剂盒I 适合载玻片成像 一、基本信息 产品简介&#xff1a;FluoroQuest抗淬灭试剂盒I 适合载玻片成像能够抑制淬灭效应&a…

unity项目《样板间展示》开发:素材导入与整理

第一章&#xff1a;素材导入与整理 前言一、创建项目文件二、导入素材模型三、素材模型整理四、光源模型管理结语 前言 这次带大家从0到1做一个unity项目&#xff1a;《样板间展示》。 顾名思义&#xff0c;项目内容是展示样板间&#xff0c;即玩家可以与房间中的物体、家具进行…

二维码地址门牌管理系统:智慧城市新篇章

文章目录 前言一、轮播广告位&#xff1a;全面信息传达二、智能化管理&#xff1a;应对挑战三、安全保障&#xff1a;市民隐私优先四、广泛应用&#xff1a;助力城市建设 前言 随着科技的飞速发展&#xff0c;城市的智能化已成不可逆转的趋势。二维码地址门牌管理系统作为新一…

ITSS认证有用吗❓属于gj级证书吗❓

&#x1f525;ITSS由中国电子技术标准化研究院推出&#xff0c;包括“IT 服务工程师”和“IT 服务经理”两种认证。该系列认证符合GB/T 28827.1 的评估和ITSS服务资质升级要求。 &#x1f3af;ITSS是受到gj认可的&#xff0c;在全国范围内对IT服务管理人员从业资格为一的权威的…

linux杀毒软件clamav安装使用

1、下载 在下面地址下载&#xff1a;https://www.clamav.net/downloads 2、安装 clamav-1.2.1.linux.x86_64.rpm放在/home路径。 执行&#xff1a; chmod -R 777 /home/clamav-1.2.1.linux.x86_64.rpm rpm -ivh clamav-1.2.1.linux.x86_64.rpm3、下载病毒库 下载路径&am…

解决element-ui中的el-select选择器无法显示选中内容的问题

问题描述&#xff1a; 排查方法&#xff1a; 检查数据控制台是否报错&#xff0c;无报错 检查change是否触发&#xff0c;会触发 最后开始百度&#xff0c;查看文档 官方文档有这么一段话&#xff0c;就是属性一定要挂载到data上&#xff0c;不然无法检测。 最后解决&#…

K8S的helm

helm的作用 在没有helm之前&#xff0c;deploymen service ingress &#xff0c;helm的作用就是通过打包的方式&#xff0c;把deployment&#xff0c;service&#xff0c;ingress 这些打包在一块&#xff0c;一键式的部署服务&#xff0c;类似yum 官方提供的一个类似于安装仓库…

python|写一个简单的web应用框架

写应用框架需要写底层服务器么? 这个要区分2种情况&#xff0c;如果应用框架&#xff0c;你没有参考WSGI标准&#xff0c;那么在写应用框架之前&#xff0c;你就必须要定义一套属于自己的服务器&#xff0c;当然本文不采取这种方式&#xff0c;专业的事情应该专业的人来做。我…

JavaEE 文件操作IO

文件操作&IO 文章目录 文件操作&IO1. 认识文件2. 文件操作2.1 File 类2.2 文件读写2.2.1 FileInputStream2.2.2 FileOutputStream2.2.3 FileReader2.2.4 FileWriter2.2.5 Scanner读取文件 3. 案例练习3.1 案例一3.2 案例二3.3 案例三 在进行文件操作之前&#xff0c;我…

Oladance、韶音、南卡开放式耳机究竟哪款更胜一筹?揭秘超强机型对比!

​探寻音乐的美妙&#xff0c;我来亲测市面上热门三大品牌Oladance、韶音、南卡的开放式耳机&#xff01;深度评测音质&#xff0c;真实还原音乐细腻之处。从我自己测评过的开放式耳机中挑选&#xff0c;告别劣质产品带来的音乐质量风险。严选精品&#xff0c;守护你的听觉健康…