最新消息:20210917 已从crifan.com换到crifan.org

【已解决】小程序中实现自定义组件调用自定义组件

自定义 crifan 542浏览 0评论
折腾:
【记录】小程序优化绘本查询细节的功能和逻辑
期间,需要去实现:
多个页面都有tags的显示:
首页的tag
详情页的tag
推荐列表中的tag
所以打算把
用自己自定义的book-list去调用自定义的tags标签组
【总结】
最后用代码:
book-list:
components/book_list/book_list.json
  "component": true,
  "usingComponents": {
    "tags": "/components/tags/tags"
  }
}

components/book_list/book_list.wxml
        <tags
          input-tag-list="{{curBookItem.tags}}"
          book-difficulty="{{curBookItem.grading.difficulty}}"
          highlight-tag="{{highlightTag}}"
        />

tags:
components/tags/tags.json
{
  "component": true,
  "usingComponents": {}
}
components/tags/tags.js
// components/tags/tags.js
const app = getApp() //获取应用实例
const util = require('../../utils/util.js')
const book_common = require('../../utils/book_common.js')

Component({
  // lifetimes: {
  //   created: function () {
  //     // 在组件实例进入页面节点树时执行
  //     console.log("component tags created")
  //   },
  //   attached: function () {
  //     // 在组件实例进入页面节点树时执行
  //     console.log("component tags attached")
  //   },
  //   ready: function () {
  //     // 在组件实例进入页面节点树时执行
  //     console.log("component tags ready")
  //   },
  //   moved: function () {
  //     // 在组件实例进入页面节点树时执行
  //     console.log("component tags moved")
  //   },
  //   detached: function () {
  //     // 在组件实例被从页面节点树移除时执行
  //     console.log("component tags detached")
  //   },
  // },

  // pageLifetimes: {
  //   show: function () {
  //     // 在组件实例进入页面节点树时执行
  //     console.log("component tags show")
  //   },
  // },

  /**
   * 组件的属性列表
   */
  properties: {
    bookDifficulty:{
      // type: Number,
      // value: 0,
      type: String,
      value: "",
    },
    inputTagList: {
      type: Array,
      value: [],
      observer: function (newTagList, oldTagList, changedPath) {
        console.log("inputTagList observer: newTagList=%o, oldTagList=%o, changedPath=%o",
          newTagList, oldTagList, changedPath)
        
        console.log("this.properties.highlightTag=%s", this.properties.highlightTag)

        if(newTagList){
          var normalTagList = newTagList
          var highlightTagList = []

          if (this.properties.highlightTag) {
            normalTagList = util.removeListItem(newTagList, this.properties.highlightTag)
            highlightTagList = [this.properties.highlightTag]
          }
          console.log("normalTagList=%o, highlightTagList=%o", normalTagList, highlightTagList)

          this.setData({
            normalTagList: normalTagList,
            highlightTagList: highlightTagList,
          })
        }
      }
    },
    highlightTag: {
      type: String,
      value: "",
    //   observer: function (newHighlightTag, oldHighlightTag, changedPath) {
    //     console.log("highlightTag observer: newHighlightTag=%s, oldHighlightTag=%s, changedPath=%o",
    //       newHighlightTag, oldHighlightTag, changedPath)
    // },
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    highlightTagList: [],
    normalTagList: [],
  },

  /**
   * 组件的方法列表
   */
  methods: {

    tagClickCallback: function (e) {
      console.log("tagClickCallback: e=%o", e)

      var tag = e.currentTarget.dataset.tag
      console.log("tag=%s", tag)
      var difficulty = e.currentTarget.dataset.difficulty
      console.log("difficulty=%s", difficulty)

      var queryParaDict = {
        "tag": tag,
        "difficulty": difficulty,
      }
      var encodedQueryStr = util.encodeQueryDict(queryParaDict)
      console.log("queryParaDict=%o -> encodedQueryStr=%s", encodedQueryStr)

      var indexUrl = '../index/index'
      indexUrl += "?" + encodedQueryStr
      console.log("indexUrl=%s", indexUrl)

      //redirect to index page
      wx.navigateTo({
        url: indexUrl,
      })
    },

  },

})
components/tags/tags.wxml
<!--components/book_list/book_list.wxml-->

<view class='tag_list'>
  <view
    wx:for="{{highlightTagList}}"
    wx:for-index="highlightTagIdx"
    wx:for-item="eachHighlightTag"
    wx:key="*this"

    class='single_tag_normal highlight_tag'
    bindtap='tagClickCallback'
    data-tag="{{eachHighlightTag}}"
    data-difficulty="{{bookDifficulty}}"
  >
    {{eachHighlightTag}}
  </view>

  <view
    wx:for="{{normalTagList}}"
    wx:for-index="normalTagIdx"
    wx:for-item="eachNormalTag"
    wx:key="*this"

    class='single_tag_normal'
    bindtap='tagClickCallback'
    data-tag="{{eachNormalTag}}"
    data-difficulty="{{bookDifficulty}}"
  >
    {{eachNormalTag}}
  </view>
</view>
components/tags/tags.wxss
/* components/tags/tags.wxss */

.tag_list{

}

.single_tag_normal{
  font-size: 12px;
  font-weight: 400;
  margin-right: 4px;
  padding-top: 1px;
  padding-bottom: 0;

  background-color: rgba(97, 210, 179, 0.8);
  color: rgba(255, 255, 255, 0.9);
  height: 15px;
  line-height: 14px;

  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;

  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}

.highlight_tag{
  background-color: rgb(19, 183, 149);
}
实现了 自定义组件book-list,调用自定义组件tags:

转载请注明:在路上 » 【已解决】小程序中实现自定义组件调用自定义组件

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
90 queries in 0.178 seconds, using 23.41MB memory