微信小程序第三天

这两天的学习效果，简单写个小页面，记录个笔记

首先看一下效果

index的HTML代码

<view>
  <swiper indicator-dots indicator-color="red" autoplay interval="2000">
    <block wx:for="{{imgUrls}}" wx:key="index">
      <swiper-item>
        <navigator url="/pages/image/imagedetails?id={{item.id}}">
          <image src="{{item.img}}" class="slide-image" data-img="{{item.img}}" bindtap='taskDetail' />
        </navigator>
      </swiper-item>
    </block>
  </swiper>
</view>

<view class="container">
  <view class="column">
    <navigator url="/pages/detail/detail?id={{item.id}}"  wx:for="{{imgUrls}}" wx:key="index">
      <view class="columnItem">
          <image src="{{item.img}}"></image>
        <view class="box">
          <view class="text1">{{item.title}}</view>
          <view class="tex2">评分:9.3</view>
          <view class="text3">上映日期: {{item.time}}</view>
        </view>
      </view>
  </navigator>

  </view>
</view>

index的css

/**index.wxss**/
.container{
    padding-top: 0;
    /* height: 100vh; */
    background-color: rgb(241, 219, 219);
  }
  .column{
  width: 90%;
  }
  .column .columnItem{
    border-radius: 20px;
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: space-around;
    background-color: pink;
    margin: 10px 0;
    align-items: center;
   
  }
  .column .columnItem image{
    height: 80px;
    width: 80px;
    border-radius: 10px;
  }
  .column .columnItem .box view{
    margin:10px 0;
  }
  .column .columnItem .box .text1{
    font-size: 20px;
  }
  .column .columnItem .box .text2{
    font-size: 16px;
  }
  .column .columnItem .box .text3{
    font-size: 14px;
    /* color: rgb(165, 151, 151); */
  }
  

js代码

 data: {
    imgUrls:[],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    getList().then(res=>{
      this.setData({
        imgUrls:res.data
      })
    })
  },

app.json

"window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#EE827F",
        "navigationBarTitleText": "小程序",
        "navigationBarTextStyle": "white"
    },

后台代码

@GetMapping("/imgs")
	public Result getResult() {
		Map<String,Object> map1 = new HashMap<String, Object>();
		map1.put("img", "http://127.0.0.1:8088/profile/pdf/gali.jpg");
		map1.put("id", "1");
		map1.put("title", "傲慢与偏见");
		map1.put("time", "2021-10-28");
		Map<String,Object> map2 = new HashMap<String, Object>();
		map2.put("img", "http://127.0.0.1:8088/profile/pdf/1000205.jpg");
		map2.put("id", "2");
		map2.put("title", "美女与野兽");
		map2.put("time", "2021-10-28");
		Map<String,Object> map3 = new HashMap<String, Object>();
		map3.put("img", "http://127.0.0.1:8088/profile/pdf/123.jpg");
		map3.put("id", "3");
		map3.put("title", "机械库房");
		map3.put("time", "2021-10-28");
		List<Map<String,Object>> list =  new ArrayList<Map<String,Object>>();
		list.add(map1);
		list.add(map2);
		list.add(map3);
		return Result.ok(list);
	}