小程序scroll-view及wx-request获取api数据

最新推荐文章于 2024-03-02 06:00:00 发布

原创最新推荐文章于 2024-03-02 06:00:00 发布 · 322 阅读

0 ·

CC 4.0 BY-SA版权

wx小程序基础专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用小程序实现电影展示页面的设计与开发过程，包括静态页面的构建、模拟数据加载和真实数据请求等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.小程序内静态页完成及样式处理

//index.wxml
<view class="movie-showing">
    <view class="movie-top">电影</view>
    <view class="movie-item">
      <view class="movie-list">
        <view class="movie-poster">
          <image src="http://v.juhe.cn/movie/img?5146"></image>
        </view>
        <view class="movie-title">哥斯拉</view>
      </view>
    </view>
</view>


//index.wxss
.movie-showing{
  padding: 20rpx;
  background-color: #42bd56;
}
.movie-top{
  color:white;
  font-size: 36rpx;
  margin-bottom: 20rpx;
}
.movie-item{
  width:100%;
  display: flex;
  height: 350rpx;
}
.movie-poster{
  width:200rpx;
  height: 280rpx;
}
.movie-poster image{
  width: 100%;
  height: 100%;
}
.movie-title{
  margin-top: 20rpx;
  text-align: center;
  width: 100%;
}

在这里插入图片描述

2.模拟数据完成scroll-view设计

//index.wxml
<view class="movie-showing">
    <view class="movie-top">电影</view>
    <scroll-view class="movie-item" scroll-x="{{true}}">
      <view class="movie-list">
        <view class="movie-poster">
          <image src="http://v.juhe.cn/movie/img?5146"></image>
        </view>
        <view class="movie-title">哥斯拉</view>
      </view>
      <view class="movie-list">
        <view class="movie-poster">
          <image src="http://v.juhe.cn/movie/img?5146"></image>
        </view>
        <view class="movie-title">哥斯拉</view>
      </view>
      <view class="movie-list">
        <view class="movie-poster">
          <image src="http://v.juhe.cn/movie/img?5146"></image>
        </view>
        <view class="movie-title">哥斯拉</view>
      </view>
      <view class="movie-list">
        <view class="movie-poster">
          <image src="http://v.juhe.cn/movie/img?5146"></image>
        </view>
        <view class="movie-title">哥斯拉</view>
      </view>
      <view class="movie-list">
        <view class="movie-poster">
          <image src="http://v.juhe.cn/movie/img?5146"></image>
        </view>
        <view class="movie-title">哥斯拉</view>
      </view>
      <view class="movie-list">
        <view class="movie-poster">
          <image src="http://v.juhe.cn/movie/img?5146"></image>
        </view>
        <view class="movie-title">哥斯拉</view>
      </view>
    </scroll-view>
</view>
//index.wxss
.movie-showing{
  padding: 20rpx;
  background-color: #42bd56;
}
.movie-top{
  color:white;
  font-size: 36rpx;
  margin-bottom: 20rpx;
}
.movie-item{
  width:100%;
  white-space: nowrap;
  display: flex;
  height: 350rpx;
}
.movie-list{
  display: inline-block;
  margin-right: 20rpx;
}
.movie-poster{
  width:200rpx;
  height: 280rpx;
}
.movie-poster image{
  width: 100%;
  height: 100%;
}
.movie-title{
  margin-top: 20rpx;
  text-align: center;
  width: 100%;
}

3.使用wx.requset获取数据渲染在页面

//index.wxml
<view class="movie-showing">
    <view class="movie-top">电影</view>
    <scroll-view class="movie-item" scroll-x="{{true}}">
      <view class="movie-list" wx:for="{{movies}}" wx:key="{{item.movieId}}">
        <view class="movie-poster">
          <image src="{{item.pic_url}}"></image>
        </view>
        <view class="movie-title">{{item.movieName}}</view>
      </view>
    </scroll-view>
</view>
//index.wxss
.movie-showing{
  padding: 20rpx;
  background-color: #42bd56;
}
.movie-top{
  color:white;
  font-size: 36rpx;
  margin-bottom: 20rpx;
}
.movie-item{
  width:100%;
  white-space: nowrap;
  display: flex;
  height: 350rpx;
}
.movie-list{
  display: inline-block;
  margin-right: 20rpx;
}
.movie-poster{
  width:200rpx;
  height: 280rpx;
}
.movie-poster image{
  width: 100%;
  height: 100%;
}
.movie-title{
  margin-top: 20rpx;
  text-align: center;
  width: 100%;
  font-size: 30rpx;
  text-overflow: ellipsis;
  overflow: hidden;
}

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

Page({
  data: {
   weather:[]
  },
  onLoad: function () {
    var that = this;
    wx.request({
      url: 'http://v.juhe.cn/movie/movies.today',
      data:{
        cityid:1,
        key: "4f8a1e7ae8ad86dd10da7c6d8cf52c29"
      },
      success:function(res){
        var movies = res.data.result;
        console.log(movies);
        that.setData({
          movies: movies
        })
      }
    })
  }
})

在这里插入图片描述