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

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

//index.wxml

    电影
    
      
        
          
        
        哥斯拉
      
    



//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

    电影
    
      
        
          
        
        哥斯拉
      
      
        
          
        
        哥斯拉
      
      
        
          
        
        哥斯拉
      
      
        
          
        
        哥斯拉
      
      
        
          
        
        哥斯拉
      
      
        
          
        
        哥斯拉
      
    

//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

    电影
    
      
        
          
        
        {
    {item.movieName}}
      
    

//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
        })
      }
    })
  }
})