创建一个数据集合

在云开发管理台创建一个guanzu关注集合，先不用添加任何记录。

guanzu关注集合

5217股票清单上点“☆”即可关注此股票

改造一下原来的“☆”标，

<view class="dian">
    <text data-index="{{index}}" catchtap="xingTap" class="xing">{{gzu}}</text>
    <text class="count">5217</text>
  </view>

原来绑定的是固定值，现在绑定在gupiao数组上，

  <text data-index="{{index}}" catchtap="xingTap" class="xing">{{item.gzu}}</text>

修改后由于数组中没有gzu这个元素显示结果如下：

没有gzu的显示效果

“☆”标没有显示出来

数据加载时先加上这个“☆”星标

  db_blma5217.where({}).orderBy('code', 'asc').skip(rowCount).get({
      success: res => {
        console.log("res", res)
        let new_data = res.data;
        //新查询出来的数据加上星标
        this.xingbiao(new_data);

new_data数据增加元素gzu

xingbiao(adata) {
    console.log("xingbiao", adata);
    //adata加一个gzu的元素,方法1全加
    //adata.map(item=>{item["gzu"] ="☆";})

    //方法2遍历加
    adata.forEach((item,index)=>{
      if (index < 5) item["gzu"] = "★";
      else item["gzu"] = "☆";
    })

     console.log("adata", adata);
  },

关注的股票代码和名称保存在云数据库的集合中

星标文本上加个tap事件

   <view class="dian">
    <text data-index="{{index}}" catchtap="xingTap" class="xing">{{item.gzu}}</text>

xingtap事件的代码

 xingTap(e) {
    //点☆关注
    console.log(e.target);
    let that = this;
    let index = e.target.dataset.index; //点击行次的 index
    let ggzu = this.data.gupiao[index].gzu; //原来是否关注
    console.log(ggzu);

    if ((ggzu == "☆") || (ggzu == undefined)) ggzu = "★"
    else ggzu = "☆"
    //数组添加元素
    let guanzu = "gupiao[" + index + "].gzu";
    that.setData({
      gzu: ggzu,
      [guanzu]: ggzu,
    })

    //保存关注
    let gpid = this.data.gupiao[index].code;
    let gpname = this.data.gupiao[index].name;

    if (ggzu == "★") {
      //加关注保存到数据库
      this.insertData(gpid, gpname);
    } else {
      //数据库中删除关注
      this.deleteData(gpid);
    }
    console.log(this.data.gupiao);
  },

其中的自定义函数insertData()保存关注

//关注添加到数据库中
  insertData(gpid, gpname) {
    console.log(gpid, gpname);
    db_guanzu.add({
        data: {
          code: gpid,
          name: gpname
        }
      })
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      })
  },

未完待续