用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序 wepy wx.previewImage 封装

Rolan 2017-10-13 00:21

imagebrowse.wpystyle lang="less" .clear { clear: both; }/styletemplate view block wx:for="{{imagelistbrowse}}" wx:for-item="image" wx:key="index" image src="{{image}}" data-src="{{image}}" @tap=&

imagebrowse.wpy

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

使用:

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

刚学Vue 和 wepy 所以组件传值踩了点坑

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: wyk304443164 来自: csdn

相关阅读