微信小程序自定义列表控件不显示在页面中

故事熊
  • 69

我在做一个小程序练习,尝试模仿实现某辞典小程序类似的效果(主页feed列表样式),使用自定义控件。但本地提交云开发数据库,本地数据获取成功后,自定义控件也不显示在页面中。
在console中调试,AppData居然是空。

自定义列表代码(脱敏)

wordsCard.wxml:

<view class="card">
  <view class="style">
    <view class="username">{{userName}}</view>
    <view class="words">{{wordsText}}</view>
    <view class="disc">{{desc}}</view>
  </view>
</view>

wordsCard.js:

Component({
  properties: { //接收外部传递进自定义控件的数据
   userName: {
      type: String,
      //value: '',
    }
    wordsText: {
      type: String,
      //value: '',
    },
    desc: {
      type: String,
      //value: '',
    },
  },
  
  data: { //组建内部数据
    wordsList:[], //创建一个数组,以备首页列表的js使用
    username:'', //这些需要吗?小程序内部控件的初始化为空
    word:'',
    desc:'',
  },

  lifetimes:{
    ...
  },

  methods: { //组件内部生命周期方法
  // 内部展示数据?这里是否有必要?
  // showWordsList:function(event){  参考链接3,在这里获得propertise的数据
    //   var data = this.properties.data
    //   var index =  e.target.dataset.index
    //   var username = data[index].username
    //   var wordstext = data[index].wordsText
    //   var desc = data[index].desc
    //   this.setData({
    //     wordsText:wordstext,
    //     desc:desc
    //   })
    },
    
    showSayingDetails: function(event){
        wx.navigateTo({
          url: 'pages/detail/detail+[index]', //点击跳转相应index页面加载详情页
        })
    },
  },
)

主业务逻辑关键代码:

onLoad: function (options) {
    let that = this
    wx.cloud.database().collection("WordsCard").get({
      success(res){
        console.log('获取数据成功',res)
        var index = res.currentTarget.dataset.index //此处为index
        var wordslist = res.data //赋值
        //判断列表内容不为空,之前出现undefined报错并做过判断,后现在用这个替代
        if(wordsList != null){ 
          that.setData({
            wordsList:wordslist,  //直接给列表数组赋值还是分别赋值?
         // username:res.data.username, 参考链接1中采用了这种赋值方式
         // word:res.data.word,
         // desc:res.data.desc,
          })
        } else {
          console.log('setdata里的值为空');
          
        }
    },
      fail(res){
        console.log('获取数据失败',res)
      }
    })
  },

## 参考链接

  1. 微信小程序 项目实战(三)list 列表页 及 item 详情页
  2. 小程序之自定义组件 ---- 列表goodsList
  3. 微信小程序:自定义组件(Component)
回复
阅读 1.5k
2 个回答

描述信息有点少,不过可以看看以下几个:

  1. 自定义组件是否添加到了 wordsCard.json 文件中
  2. get请求是否成功

也可以在在评论里边回复具体的问题。

已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏