用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

6

主题

24

帖子

485

积分

诠释者

Rank: 4

积分
485
2017-3-22 23:57:32 陈跃开发者认证 诠释者 楼主 247960
具体的截图,今天由于时间关系,不做详细描述若需要具体数据信息,或者了解更多小小艺人平台信息
可在网上搜索“艺人邦”,或者访问“http://www.300hu.com/”官网,下载APP,或者注册,即可获得相关接口,已经相应数据内容和用法
1.相册进入界面
列表样式显示图片
2.点击图片
进入高级画册
3.高级画册
可点选对应的图片,查看高品质图片,由于网络影响,速度可能会比较慢
大图,可以通过点击它显示左右切换功能,也可以手动滑动(一般会受网络影响)
同时,图片在3秒后可以点击close关闭


简略图显示部分功能

简略图显示部分功能



代码示例:
[AppleScript] 纯文本查看 复制代码
var util = require('../../utils/util.js')
var cfg = require('../../utils/cfg.js')
Page({
  data: {
    album: {},
    show: true,
    pid: 0,
    cid: 0,
    savatar: '',
    showGallery: true,
    showBtn: true,
    height: cfg.height,
    width: cfg.width,
    scale: cfg.height / cfg.width,
    img: cfg.img,
    imageWidth: cfg.width,
    imageHeight: cfg.height,
    time: 0,
    params: {
      client_ver: '0.4.4',
      from_client: 'cc',
      openid: '',
      page: 1,
      pagesize: 10,
      title: '',
      uid: 1140518
    }
  },
  formSubmit: function (e) {
    var val = e.detail.value
    console.log('form发生了submit事件,携带数据为:', val.input)
    var that = this
    var obj = that.data.params
    obj.title = val.input
    that.setData({ params: obj })
    setTimeout(function () {
      that.getConImages()
    }, 1000)
  },
  getConImages: function () {
    var that = this
    var obj = that.data.params
    console.log('album---params--name:' + obj.username)
    util.get(cfg.host + 'api/cc/act?mod=user3&act=photos', obj,
      function (res) {
        obj = res.data
        obj = obj.data.list
        that.setData({
          album: obj,
          time: 0
        })
      })
  },
  showMadel(e) {
    console.log('showMadel:' + e.currentTarget.id)
    var that = this
    that.setData({
      showGallery: false,
      cid: e.currentTarget.id
    })
  },
  showView(e) {
    var that = this
    var savatar = that.data.album[e.currentTarget.id].photo
    savatar = savatar.split('.jpg')
    savatar = savatar[0] + '.jpg'
    var imageSize = util.imgUtil(savatar)
    that.setData({
      show: false,
      pid: e.currentTarget.id,
      savatar: savatar,
      imageWidth: imageSize.imageWidth,
      imageHeight: imageSize.imageHeight
    })
  },
  showBtns(e) {
    var that = this
    that.setData({showBtn: false})
    setTimeout(
      function() {
        if (!that.data.showBtn) {
          that.setData({showBtn: true})
        }
      }, 3000)
  },
  closeImg(e) {
    console.log('e:' + e)
    console.log('closeImg:' + e.currentTarget.id)
    var that = this
//    var pid = that.data.pid
    var show = that.data.show
    if (show) {
      // 当处于浏览状态时,点击关闭,隐藏浏览界面
      that.setData({showGallery: true})
    } else {
      // 当处于浏览状态时,点击关闭,隐藏浏览界面
      that.setData({show: true})
    }
  },
  nextImg(e) {
    // 点击时,获取当前图片ID,或者pid
    var that = this
    var id = that.data.cid
    var length = that.data.length
    var time = that.data.time
    if (id === (length - 2)) {
      if (time !== 1) {
        time = 1
        setTimeout(function () {
          that.getMoreImg()
        }, 1000)
      } else {
        return
      }
      wx.showToast({
        title: '更多,请等待加载',
        icon: 'successs',
        duration: 2000
      })
    } else {
      that.setData({cid: id + 1, pid: id + 1})
    }
  },
  prevImg(e) {
  // 点击时,获取当前图片ID,或者pid
    var that = this
    var id = that.data.pid
    //    var length = that.data.album.length
    if (id === 0) {
      wx.showToast({
        title: '这是第一张图片',
        icon: 'successs',
        duration: 2000
      })
      return
    }
    that.setData({cid: id - 1, pid: id - 1})
  },

  changeId(e) {
    console.log('changeId:' + e.detail.current)
    var that = this
    var id = e.detail.current
    var time = that.data.time
    if (id >= that.data.album.length - 2) {
      wx.showToast({
        title: '更多,请等待加载',
        icon: 'successs',
        duration: 2000
      })
      if (time !== 1) {
        time = 1
        setTimeout(function () {
          that.getMoreImg()
        }, 1000)
      } else {
        id = id - 1
      }
    }
    var show = that.data.show
    var savatar = that.data.album[id].photo
    if (!show) {
      savatar = savatar.split('.jpg')
      savatar = savatar[0] + '.jpg'
    }
    that.setData({
      cid: id,
      pid: id,
      savatar: savatar
    })
  },
  bindCid(e) {
    console.log('closeView:' + e.currentTarget.id)
    var that = this
    that.setData({cid: e.currentTarget.id})
  },
  scrollEvent: function (e) {
    var that = this
    setTimeout(function () {
      that.getMoreImg()
    }, 1000)
  },
  getMoreImg: function () {
    var that = this
    var obj = that.data.params
    var album = that.data.album
    if (album.length === obj.pagesize) {
      obj.pagesize += 10
      that.setData({
        params: obj
      })
    }
    setTimeout(function () {
      that.getConImages()
    }, 1000)
  },
  onLoad: function () {
    var that = this
    var width = cfg.width
    var height = cfg.height
    console.log('width:' + width + 'height:' + height)
    var scale = height / width
    that.setData({
      width: width,
      height: height,
      scale: scale
    })
    setTimeout(function () {
      that.getConImages()
    }, 1000)
  }
})
// # sourceMappingURL=album.js.map

[AppleScript] 纯文本查看 复制代码
<scroll-view scroll-y="true" hidden="{{!showGallery}}"style="height:{{(album.length)*100}}rpx;background-color:lightcyan;position:relative;top:125rpx;" 
> 
<form bindsubmit="formSubmit" class = "firstbox">
 <view class = "srft">
<input name="input" style="background-color:gray;margin-top:-21rpx;margin-left:80rpx;width:330rpx;border:2rpx solid yellow;border-radius:8%"  />
<button formType="submit" style="color:blue;margin-top:-21rpx;font-size:21rpx;height:60rpx;margin-left:100rpx;text-align:top;">搜索</button> 
 </view>
</form> 
  <view class="params" wx:for="{{album}}" 
wx:key="photo"
wx:if="{{(index%3==0)}}">      
        <view 
        style="margin-left:40rpx;"
        bindtap="showMadel" id="{{index}}">
    <image 
        class="userinfo-avatar"
        src="{{img+album[index].photo}}"
        ></image> </view> 
        <view 
        style="margin-left:10rpx;margin-right:10rpx;"
        bindtap="showMadel"
        id="{{index+1}}"> 
        <image
        class="userinfo-avatar"
        src="{{img+album[index+1].photo}}"
        ></image> 
        </view> 
        <view 
        style="margin-right:40rpx;"
        bindtap="showMadel"
        id="{{index+2}}"> 
        <image
        class="userinfo-avatar"
        src="{{img+album[index+2].photo}}"
        ></image>
        </view>
  </view> 
</scroll-view> 








<view hidden="{{showGallery}}"style="position:absolute;top:0rpx;left:0rpx;width:100%;height:100%;z-index:1;background:linear-gradient(to bottom, lightblue , lightgray);opacity:0.6;">
</view>
<view hidden="{{showGallery}}" style="position:absolute;top:0rpx;left:0rpx;width:100%;height:100%;z-index:2;">


 <swiper indicator-dots="true" current="{{cid}}" bindchange="changeId"
  autoplay="false" interval="60000" duration="400" circular="false" style="width:{{(show)?70:90}}%;height:{{(show)?50:90}}%;position:absolute;top:5%;left:{{(show)?15:5}}%;border-top: 3rpx solid lightgray;border-bottom: 4rpx solid gray;border-right:3rpx solid gray;border-left:2rpx solid lightgray;border-radius:2%;opacity:{{(show)?0.9:0}};background-color:aliceblue;z-index:{{(show)?3:5}}" >
  <block wx:for="{{album}}" wx:key="photo">
    <swiper-item id="{{index}}" bindtap="{{(show)?'showView':'showBtns'}}" >
      <image 
      src="{{img+album[index].photo}}" style ="width:{{(show)?80:100}}%;height:{{(show)?80:100}}%;position:relative;top:{{(show)?10:0}}%;left:{{(show)?10:0}}%;"/>
    </swiper-item>
  </block>
</swiper>

<scroll-view   scroll-x="true" bindscrolltolower="scrollEvent" style="position:absolute;top:60%;left:0rpx;width:100%;height:30%;"  lower-threshold ="10rpx" scroll-left="{{(cid>2)?(cid*130):0}}" >
<view  class="box3" style = "width:{{(album.length)*240}}rpx;" >  
<view  wx:for="{{album}}" wx:key="photo" >   
<view bindtap="bindCid"  id="{{index}}" 
style ="display:flex;flex-direction:row;align-items:center;margin-left:40rpx;border-radius:8%;border:{{(index == cid)?'6rpx solid pink':'3rpx solid gray'}}"
>
     <image class="userinfo-avatar" src="{{img+album[index].photo}}"></image>
</view > 
</view > 
</view > 
</scroll-view >

<view bindtap="showBtns"  hidden="{{show}}" style="position:absolute;top:0%;left:0%;width:100%;height:100%;z-index:3;background-color:black;opacity:0.6;">
</view>
      <!--<image bindtap="showBtns"  hidden="{{show}}" id ="{{pid}}" src="{{img+savatar}}" style ="width:{{imageWidth}}px;height:{{imageHeight}}px;position:absolute;left:{{(imageWidth==width)?0:(width-imageWidth)/2}}px;top:{{(imageHeight==height)?0:(height-imageHeight)/2}}px;z-index:4;"/>-->
<image bindtap="showBtns"  hidden="{{show}}" id ="{{pid}}" src="{{img+savatar}}" style ="width:90%;height:80%;position:absolute;left:5%;top:10%;z-index:4;"/>

<view hidden="{{showBtn}}">
<button bindtap="prevImg" style="position:absolute;top:40%;left:4%;width:10%;height:7%;background-color:white;z-index:6;opacity:0.8;border-radius:40%;color:black;border:1rpx solid lightgray;font-weight:bold;" >
<--
</button>
<button bindtap="nextImg" style="position:absolute;top:40%;right:4%;width:10%;height:7%;background-color:white;z-index:6;opacity:0.8;border-radius:40%;color:black;border:1rpx solid  lightgray;font-weight:bold;" >
>--
</button>
</view>

<button bindtap="closeImg" hidden="{{!showBtn}}" style="position:absolute;top:90%;left:39.9%;width:20%;height:7%;background-color:white;z-index:6;opacity:0.8;border-radius:30%;color:black;border:1rpx solid lightgray;font-weight:600;" >
close
</button>
</view>


项目下载:
GalleryDemo.zip (11.35 KB, 下载次数: 109)

评分

参与人数 2原创 +2 浮云 +40 收起 理由
dzp + 1 + 20 赞一个!
天下雪 + 1 + 20 赞一个!

查看全部评分

受权限影响,这个demo数据是十分有限的,功能也不是全部,但尽管如此,也比缩略图看到的功能要好的多!
看了一下真机效果,提供了一个不错的思路;算是一个比较完善的小相册。
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
1
~~
2017-3-23 09:43:26 陈跃开发者认证 诠释者
7#
2017-3-23 09:44:34 陈跃开发者认证 诠释者
8#
话说有必要提示一下,仅仅复制看到的这些代码,是没有太多作用的!
陈跃 发表于 2017-3-23 09:44
话说有必要提示一下,仅仅复制看到的这些代码,是没有太多作用的!

放心,代码部分,只是看个简要,有兴趣的一定会下载源码的   
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
666
shishikankan
啦啦啦我是买报的小行家
快快快快快快
不错不错
12下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册