说明:最近入住微信小程序,将自己所学经历分享出来,包括学到的知识,踩到的坑,一起分享给大家,后续会慢慢更新:
首先针对一些几乎没有基础的童鞋,附上一些链接,大致看完后能够有能力制作简单的小程序了:
另外特别推荐一波福利(样式库,也就是说,各种弄好的样式,直接用,是不是很舒服?):
https://github.com/weui/weui-wxss
先上效果图:
大概就是这样了:点的位置与数量靠一个数组来确定,是不是你想要的效果呢:
接着上代码:
首先是wxml:
<view class="classname" wx:for="{{array}}">
<image style="transform:translate({{item.offsetX}}px, {{item.offsetY}}px) ;" class="img" id="{{stv.id[index]}}" src="../../images/location_red.png" bindtap="onBind"></image>
</view>
简单的来说,使用wx:for,其中放入数组,他会自动的去循环遍历得到数组长度的标签,然后是要动态打点,那么点肯定有个偏移度,同样的动态设置偏移度就可以了,此处设定一个点为一个对象,那么每次遍历得到对应的对象的偏移量也就基本实现了效果了
js:
var arr = new Array();
var location1 = {
offsetX: 10,
offsetY: 10,
name: "景点1"
}
var location2 = {
offsetX: 20,
offsetY: 20,
name: "景点2"
}
var location3 = {
offsetX: 60,
offsetY: 60,
name: "景点3"
}
arr.push(location1);
arr.push(location2);
arr.push(location3);
Page({
/**
* 页面的初始数据
*/
data: {
array: arr,
},
onBind: function () {
console.log("点击了");
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
})
更简单,对象值赋给arr就可以了,联想到以后访问服务器得到数组
css:
.img{
width: 10px;
height: 10px;
position: absolute
}
重要的是确定position为absolute,然后就完成了效果了
小程序新人小白,如有不对,请评论指出,因网上搜未找到相关方法,就自己弄了,若是帮到你,不胜荣幸!
另外附有demo链接:包含手指控制图片放大缩小,动态添加标签,边界限制等
地址:点击打开链接