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

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

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

1.官方文档：

https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

2.小程序实用入门教程：

http://www.jianshu.com/p/aaef5ceb3936

3.详细的小程序教程资料（百度云盘）：

http://pan.baidu.com/s/1eR5bRm6

4.JavaScript教程：

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

5.开发者社区：

https://developers.weixin.qq.com/home?tab=1&labels=&lang=zh_CN&token=1284121136

6.css入门链接：

http://www.w3school.com.cn/css/css_syntax_id_selector.asp

7.微信小程序开发相关视频教程（可能会不定期更新）：

https://pan.baidu.com/s/1dF3Y32D

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

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

地址：点击打开链接