微信小程序-随机布局

<!--pages/homeMap/homeMap.wxml-->

<view class='background' style='background-image: url("http://bmob-cdn-13048.b0.upaiyun.com/2018/09/05/9b5bbf204029447c805576e5924f11a5.png");'>

<!-- <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{TopTips}}</view> -->

<view wx:for="{{imagesArray}}" data-index='{{index}}' wx:key='index' class='buiding buid{{index}}' style='{{item.width*0.67}}rpx;height:{{item.height*0.67}}rpx;top:{{item.top*0.67}}rpx;left:{{item.left*0.67}}rpx;animation:{{item.avatar=="-1"&& index==kArr[k]?animation:""}}' bindtap='click'>

<image class='img{{index}}' style='{{item.width*0.67}}rpx;height:{{item.height*0.67}}rpx;' src='{{item.avatar=="-1"?item.myEnterpriseObj:item.avatar}}'></image>

</view>

</view>

 

/* pages/homeMap/homeMap.wxss */

page{

overflow-x: hidden;

}

.background{

750rpx;

height: 1387rpx;

background-repeat:no-repeat;

background-size:750rpx 1387rpx;

background-origin:padding-box;

}

.buiding{

position: absolute;

}

.buiding:hover{

position: relative;

border: 2rpx dashed goldenrod;

}

.buid0{

text-align: center;

}

.buid1{

text-align: center;

}

.buid2{

border-radius:0%;

text-align: center;

}

.buid3{

text-align: center;

}

.buid4{

text-align: center;

}

.buid5{

border-radius:0%;

text-align: center;

}

.buid6{

border-radius:0%;

text-align: center;

}

.buid7{

text-align: center;

}

.buid8{

text-align: center;

}

@keyframes mymove

{

0% {border:none;}

50% {border:1rpx dashed goldenrod;}

100% {border:none;}

}

.weui-toptips_warn{text-align: center;background: red}

 

// pages/homeMap/homeMap.js

//获取应用实例

var app = getApp()

Page({

data: {

screenHeight: 0,

screenWidth: 0,

myEnterpriseElements: [], //读取的数据 myEnterpriseElements:[{url:'/images/22.png',location:0}]

imagesArray: [

{ top: '44', left: '52', '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/440e25f3402982ab801ba59ed5823ab3.png',isEle:false,types:'farm'},

{ top: '374', left: '16', '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/26baa5f8407ecf75806d1acddd4ddf0f.png', isEle: true },

{ top: '612', left: '8', '240', height: '240', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/5d17e4514077f42f8055c62d238bd12e.png', isEle: true },

{ top: '1240', left: '8', '240', height: '240', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/83899b69404bfaa3800f16939c02f71d.png', isEle: true },

{ top: '132', left: '533', '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/24bd088b403c5fd0807fa0529c311c73.png', isEle: false, types: 'pasture'},

{ top: '312', left: '915', '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/30704994407feea580eac7a149d5d55a.png', isEle: true },

{ top: '380', left: '335', '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/a1a4d2c84014b1f78080d6bbcf8fe8ff.png', isEle: true },

{ top: '380', left: '543', '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/9cd99b5840ba4df4803e7b0de9a31330.png', isEle: false, types: 'fish'},

{ top: '768', left: '901', '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/cd061099404221f680c79e1b56775d5b.png', isEle: true },

{ top: '974', left: '901', '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/e90a21f540fea76e805df03f87c2e0ea.png', isEle: true },

{ top: '1235', left: '296', '220', height: '220', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/b468c7aa4000fc51809d2e5d1cd0dfc9.png', isEle: false, types: 'flower'},

{ top: '1235', left: '534', '220', height: '220', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/cbc6ddb240f94a3f80add6b88440c3ed.png', isEle: true },

{ top: '1550', left: '299', '230', height: '230', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/89991be740f3448f80e4fa8e62d2f3ef.png', isEle: true },

{ top: '1550', left: '545', '230', height: '230', myEnterpriseObj: '/images/fodder/240.png', avatar: '-1' },

{ top: '1550', left: '791', '230', height: '230', myEnterpriseObj: '/images/fodder/240.png', avatar: '-1' },

],

k: null, //闪烁元素下标

TopTips: '',

showTopTips: false,

animation: 'mymove 1s infinite' //定义动画

//data /布局

},

onLoad: function () {

// http://bmob-cdn-13048.b0.upaiyun.com/2018/09/05/9b5bbf204029447c805576e5924f11a5.png 家园7

},

onShow() {

this.load()

this.show()

let that = this

setInterval(function () {

that.show()

}, 4000)

},

show() {

//未建设单位随机闪烁

let kArr = []

for (let k in this.data.imagesArray) {

if (this.data.imagesArray[k].avatar == '-1') {

// console.log(k)

kArr.push(k)

let kNum = Math.floor(Math.random() * kArr.length + 1) - 1

this.setData({

k: kNum,

kArr: kArr,

})

}

}

// console.log('闪烁下标', this.data.kArr[this.data.k])

this.showTopTips("没有建设的单位会随机闪烁提示")

let that = this

setTimeout(function () {

that.setData({

k: null

})

}, 3000)

},

showTopTips: function (strTopTips) {

var that = this;

this.setData({

showTopTips: true,

TopTips: strTopTips

});

setTimeout(function () {

that.setData({

showTopTips: false

});

}, 1500);

},

load() {

//进入加载数据

let items = app.globalData.igJLSys.myEnterprise

console.log(items)

this.setData({

myEnterpriseElements: items

})

let imagesArray = this.data.imagesArray

let myEnterpriseElements = this.data.myEnterpriseElements

imagesArray.forEach(function (val, index, imagesArray) {

for (let ii in myEnterpriseElements) {

if (index == myEnterpriseElements[ii].locationNoInMap) {

imagesArray[index].avatar = myEnterpriseElements[ii].enterprisePointer.EtpsIcon

imagesArray[index].enterpriseID = myEnterpriseElements[ii].enterpriseID

}

}

})

this.setData({

imagesArray: imagesArray,

myEnterpriseElements: myEnterpriseElements

})

// }

},

click(e) {

console.log(e.currentTarget.dataset.index)

if (this.data.imagesArray[e.currentTarget.dataset.index].avatar == '-1') {

wx.showActionSheet({

itemList: ['建造'],

success: function (res) {

console.log(res.tapIndex)

//

}

})

} else {

if (this.data.imagesArray[e.currentTarget.dataset.index].isEle ==false){

wx.navigateTo({

url: '/pages/newMap/newMap?types=' + this.data.imagesArray[e.currentTarget.dataset.index].types,

})

}else{

wx.showToast({

title: '没有下级',

icon:'none'

})

}

}

},

})