templateF.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <view class="picture">
  3. <view class="section" v-for="(item,index) in productList" :key="index" @click="navigaitionTo(item)">
  4. <image :src="item.adsImage" mode="heightFix"></image>
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. export default{
  10. data(){
  11. return{
  12. productList:[]
  13. }
  14. },
  15. props:{
  16. pageData: {
  17. type: Object
  18. },
  19. userIdentity: {
  20. type: Number
  21. },
  22. flag:{
  23. type:Boolean,
  24. default:false
  25. }
  26. },
  27. created() {
  28. this.initData(this.pageData);
  29. },
  30. watch: {
  31. pageData: {
  32. handler: function(el) {
  33. //监听对象的变换使用 function,箭头函数容易出现this指向不正确
  34. this.pageData = el
  35. this.initData(this.pageData)
  36. },
  37. deep: true
  38. }
  39. },
  40. methods:{
  41. initData(data){
  42. if(this.flag){
  43. this.productList = data.floorImageList;
  44. }else{
  45. this.productList = data.floorImageList.slice(0,1);
  46. }
  47. },
  48. navigaitionTo(item){
  49. console.log(item);
  50. if(item.link){
  51. uni.navigateTo({
  52. url:`/h5/pages/article/path?link=${item.link}`
  53. })
  54. }
  55. }
  56. }
  57. }
  58. </script>
  59. <style lang="scss">
  60. .picture{
  61. .section{
  62. width: 702rpx;
  63. height: 340rpx;
  64. overflow: hidden;
  65. border-radius: 16rpx;
  66. margin-top: 24rpx;
  67. &:first-child{
  68. margin-top: 0;
  69. }
  70. image{
  71. width: 702rpx;
  72. height: 340rpx;
  73. }
  74. }
  75. }
  76. </style>