微信小程序（1）新闻小应用代码以及总结小程序一些知识点

本文链接：https://blog.csdn.net/weixin_44514797/article/details/100074795

本文介绍了微信小程序开发一个新闻应用的首页代码，探讨了在小程序中遇到的问题，包括js中`var that = this`的使用，wx:for列表渲染，wx:key的唯一标识性作用，以及使用`left: 0; right: 0; top: 0; bottom: 0; margin: auto;`实现居中对齐的方法。

摘要由CSDN通过智能技术生成

首页代码

<!--index.wxml-->
<view class="mainViewClass">
<!--加载动画-->
<loading hidden="{
  {loading}}">
</loading>
**<!--顶部分栏项目-->
<view class="topTabBarClass">
<!--block模块通过wx：for读取tarray数组内容来创建view控件，animation绑定动画，bindtap绑定单击事件，data-idx绑定单击事件的参数。view组件显示的内容是item.name-->

<!--类型 滚动视图-->
<!--wx:循环播放-->
<scroll-view  scroll-x="true" style="width:90%; height:100%;white-space:nowrap;display:flex">
<block wx:for="{
  {tArray}}">
<view animation="{
  {animation}}" class="topTypeListClass{
  {index==curpage?'curPage':''}}" bindtap="typeClick " id="{
  {index}}" date-idx="{
  {item.category}}">
{
  {item.name}}
</view>
</block>
</scroll-view>
<!--右边按钮-->
<!--aspectFit;按比例保持缩放图片-->
<view class="rightview">
<image mode="aspectFit" src="/miniprogram/pages/images1/imges/addChannel.png " class="addImage"></image>
</view>
</view>**
<!--新闻列表-->
<!--scroll-y="true":垂直滚动-->
<!--高度：viewHeight-->
<!--lower-threshold：距离底部50，调用addMoreData事件-->
<!--下拉到底部触发addData事件，加载更少-->
<scroll-view scroll-y="true" style="width:100%; height:{
  {viewHeight}}px" lower-threshold="50" bindscrolltolower="addMoreData"> 
<!--循环添加每一个cell内容-->
<block wx:for="{
  {detaildata}}">
<view class="cellClass">
<!--标题-->
<text>{
  {item.title}}</text>
<!--图片-->
<view class="imageClass" hidden="{
  {!item.has_image}}">
<image class="imageshow" src="{
  {!item.image_list[0].url}}" mode="scaleToFill"></image>
<image class="imageshow" src="{
  {!item.image_list[1].url}}"></image>
<image class="imageshow" src="{
  {!item.image_list[2