微信小程序实现动态添加标签（1）

说明：最近入住微信小程序，将自己所学经历分享出来，包括学到的知识，踩到的坑，一起分享给大家，后续会慢慢更新：

首先针对一些几乎没有基础的童鞋，附上一些链接，大致看完后能够有能力制作简单的小程序了：

另外特别推荐一波福利（样式库，也就是说，各种弄好的样式，直接用，是不是很舒服？）：

? ? ? ?https://github.com/weui/weui-wxss

ok，以上内容到此为止，接下来附上今天的主题微信小程序动态添加标签：

先上效果图：

大概就是这样了：点的位置与数量靠一个数组来确定，是不是你想要的效果呢：

接着上代码：

首先是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链接：包含手指控制图片放大缩小，动态添加标签，边界限制等

地址：点击打开链接