0
点赞
收藏
分享

微信扫一扫

不知道怎么显示不出来,微信小程序

<!--index.wxml-->
<view class="container">
  <swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
  <block wx:for="{{swiperImg}}" wx:key="index">
  <swiper-item>
  <image src="{{item.src}}" class="slide-image"></image>
  </swiper-item>
  </block>
  </swiper>
  <view id='news-list'>
  <view class="list-item" wx:for="newList" wx:for-item="news" wx:key="id">
  <image src='{{news.poster}}'></image>
  <text class='news-title'>{{news.title}}————{{news.add_date}}</text>
  </view>
</view>
</view>

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    swiperImg: [
      {src: 'http://www.news.cn/politics/leaders/2022-04/25/1128595417_16508980058061n.jpg'},
      {src: 'http://www.news.cn/politics/leaders/2022-04/25/1128595417_16508980058061n.jpg'},
      {src: 'http://www.news.cn/politics/leaders/2022-04/25/1128595417_16508980058061n.jpg'},
    ],
    newsList:[{
      id: '264698',
      title: '俄罗斯联邦驻华大事索尼姐夫会议校党委书记顾家山一行并接受《李刚译文全集》赠予',
      poster: 'http://www.news.cn/politics/leaders/2022-04/25/1128595417_16508980058061n.jpg',
      add_date: '2018-03-05'
    }]
  }
})

/**index.wxss**/
swiper {
  height: 400rpx;
}
swiper image {
  width: 100%;
  height: 100%;
}
#news-list {
  min-height: 600rpx;
  padding: 15rpx;
}
.list-item  {
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid gray;
}

.list-item image {
  width: 230rpx;
  height: 150rpx;
  margin: 10rpx;
}

.new-title {
  width: 100%;
  display: block;
  line-height: 60rpx;
  font-size: 10pt;
}
举报

相关推荐

0 条评论