1. Toy模板网首页
  2. > Toy博客

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

8月前 作者：小田田_XOW 分类：Toy博客 阅读(25) 违法举报

这篇具有很好参考价值的文章主要介绍了小程序样例2：简单图片分类查看。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

基本功能：

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

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

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

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

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

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

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

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

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

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

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

源码实现

主页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  有想法的朋友可以一起交流下~文章来源地址https://www.toymoban.com/news/detail-823793.html

到了这里，关于小程序样例2：简单图片分类查看的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • uniapp(微信小程序/支付宝小程序) - 最新解决canavs绘制海报、二维码图片等不显示问题，在uniapp小程序开发中使用canavs制作base64图片在真机运行时空白不显示（详细解决方法）

    uniapp(微信小程序/支付宝小程序) - 最新解决canavs绘制海报、二维码图片等不显示问题，在uniapp小程序开发中使用canavs制作base64图片在真机运行时空白不显示（详细解决方法）

    在uniapp微信小程序 | uniapp支付宝小程序中，详解canavs技术绘制图像后在真实手机上运行不显示的问题，解决uniapp安卓苹果ios运行小程序后二维码/海报无法加载和展示，完美解决兼容问题、图片太大画不出来、加载失败等。支持保存到相册中或长按保存。 很多教程都无效，本

    2024年04月25日
    浏览(38)
  • 使用flask实现图片的查看、翻页操作、分类和上传

    使用flask实现图片的查看、翻页操作、分类和上传

    本实验使用flask制作一个图像的分类上传界面，首先介绍一下使用方法。 页面如下 1、首先打开‘index.html’文件，在select标签中添加分类类别。注意：value值应和标签文本一样。   将需要分类的图片全部粘贴进images文件夹中。    运行‘classify.py’文件。 点击下方链接 出现以

    2024年02月03日
    浏览(16)
  • 微信小程序开发-让图片居中

    微信小程序开发-让图片居中

    客户说要在首页加个logo然后居中， 用最后给的完整代码，按照我的步骤一定能调试出来，不行再联系我。 先给用到的代码以及效果图： 先给wxml程序： 效果如下：   重点样式： display:flex;justify-content: center; 其中display:flex; 是什么意思呢如何使用，找了一篇文章 弹性布局（

    2023年04月10日
    浏览(20)

  • 微信小程序开发之图片压缩方案

    目录  前言： 问题：现有的压缩方案支付宝小程序不生效 解决方案： uni.createCanvasContext(canvasId, this) 核心代码展示：

    2024年02月09日
    浏览(25)
  • 微信小程序开发：设定背景图片

    微信小程序开发：设定背景图片

    今天在开发小程序的时候用到背景图片设定功能，但请求本地资源的图片时却提示错误，无法加载本地资源。那它的原因是什么呢？又有什么其他设置的方式？作者今天来给你解答 其实在小程序开发的时候我们无法通过 wxss样式表 来获取本地资源当作背景图片 我们只需要将

    2024年02月09日
    浏览(33)
  • 微信小程序开发实战：实现图片保存到手机相册的方法

    微信小程序开发实战：实现图片保存到手机相册的方法

    随着微信小程序的普及，越来越多的人开始使用微信小程序来实现各种功能。其中，将图片保存到手机相册是一个常见的需求，但是如何实现呢？本文将介绍如何使用微信小程序实现将图片保存到手机相册，帮助大家快速掌握这一实用技能。 首先，在 data 中定义了两个变量，

    2024年02月13日
    浏览(32)
  • 麻将计分器：简单的微信小程序开发

    麻将计分器：简单的微信小程序开发

    朋友们推荐了一个计分的小程序，但是这个小程序不仅打开有广告，各个页面都植入了广告，用起来十分不适。 于是我就心里暗自下定决心，一定要撸一个没有广告的小程序。一周后，这个小程序发布了。 欢迎大家参观和使用我的小程序！小程序名称： MahjongScorer 1.注册，获

    2024年02月03日
    浏览(201)
  • 微信小程序 | 小程序开发

    微信小程序 | 小程序开发

    🖥️ 微信小程序专栏：小程序开发 初级知识 🧑‍💼 个人简介：一个不甘平庸的平凡人🍬 ✨ 个人主页：CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、认识小程序开发 什么是小程序? 各个平台小

    2024年01月24日
    浏览(46)
  • 远程线程注入(简单样例以及原理)

    远程线程注入(简单样例以及原理)

    注入的目标是将我们的代码注入到目标进程的地址空间中 注入通常可以根据注入的内容分为两种类型： shellcode注入 ：这种注入是将我们的代码直接注入到目标内存中，这就要保证我们的代码在贴到其他地址上后仍然能够正常执行 ：这种方式优点是不容易检测，因为他的特征

    2024年02月12日
    浏览(23)

  • C#中UDP的简单使用+样例

    发送：         --发送的数据是byte类型，指定ip和端口 接收：         --需要开个线程不停地调用Receive 样例：GitHub - zzp229/UDP-: 使用wpf实现一个基于UDP的额聊天系统，包括发群聊、私信、图片和文件 稍微大点的图片或文件就需要分包才能发送，只实现了发送文字和发送小图

    2024年02月04日
    浏览(24)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包