小程序模板网

微信小程序 wepy wx.previewImage 封装

2018-04-25 箔经绳

imagebrowse.wpy

 

				
  1. <style lang="less">
  2. .clear {
  3. clear: both;
  4. }
  5. </style>
  6.  
  7. <template>
  8. <view>
  9. <block wx:for="{{imagelistbrowse}}" wx:for-item="image" wx:key="index">
  10. <image
  11. src="{{image}}"
  12. data-src="{{image}}"
  13. @tap="previewImage"
  14. class="{{imageclass}}">
  15. </image>
  16. </block>
  17. <view class="clear"></view>
  18. </view>
  19. </template>
  20.  
  21. <script>
  22. /* eslint-disable comma-dangle */
  23.  
  24. import wepy from 'wepy'
  25.  
  26. export default class imagebrowse extends wepy.component {
  27. props = {
  28. imagelistbrowse: {
  29. // coerce: function (v) {
  30. // console.log('vvvvvvv ' + v)
  31. // return v ? [].concat(v) : []
  32. // },
  33. type: Array,
  34. default: [],
  35. // twoWay: true
  36. },
  37. imageclass: ''
  38. }
  39.  
  40. data = {}
  41.  
  42. events = {}
  43.  
  44. methods = {
  45. previewImage (e) {
  46. console.log(e)
  47. let current = e.target.dataset.src
  48. wx.previewImage({
  49. current: current, // 当前显示图片的http链接
  50. urls: this.imagelistbrowse // 需要预览的图片http链接列表
  51. })
  52. }
  53. }
  54.  
  55. onLoad () {
  56. console.log('onLoad ' + JSON.stringify(this.imagelistbrowse))
  57. }
  58.  
  59. onShow () {
  60. console.log('onShow ' + JSON.stringify(this.imagelistbrowse))
  61. }
  62. }
  63. </script>

使用:

 

				
  1. <style lang="less">
  2. @import "../style/mixin";
  3.  
  4. .user-img {
  5. .wh(75px, 75px);
  6. border-radius: 50%;
  7. border: 5px solid rgba(215, 215, 215, 0.8);
  8. margin-top: 20px;
  9. }
  10.  
  11. </style>
  12.  
  13. <template>
  14. <repeat>
  15. <imagebrowse
  16. :imageclass="'user-img'"
  17. :imagelistbrowse.sync="userPhoto">
  18. </imagebrowse>
  19. </repeat>
  20. </template>
  21.  
  22. <script>
  23. import wepy from 'wepy'
  24. import ImageBrowse from '../components/imagebrowse'
  25.  
  26. export default class homelist extends wepy.page {
  27.  
  28. ...
  29.  
  30. components = {
  31. imagebrowse: ImageBrowse,
  32. }
  33.  
  34. data = {
  35. userPhoto: [], // 注意这边,因为是为了显示列表,所以是list
  36. }
  37.  
  38. computed = {}
  39.  
  40. methods = {
  41.  
  42. }
  43.  
  44. events = {}
  45.  
  46. onLoad () {
  47. }
  48.  
  49. onShow () {
  50. this.$parent.getUserInfo(u => {
  51. this.userInfo = u
  52. this.userPhoto = u.avatarUrl ? [].concat(u.avatarUrl) : []
  53. this.$apply()
  54. })
  55. };
  56. }
  57. </script>


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23976.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询