本文给大家带来的是微信小程序双图显示最佳旅行城市列表样式制作设计教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="destination">
<block wx:for="{{ elements }}" wx:for-item="e" wx:key="e.index">
<view class="title">{{ e.title }}</view>
<view class="list">
<view class="poi" data-type="{{ poi.type }}" data-id="{{ poi.id }}" data-name="{{ poi.name }}" bindtap="viewPOI" wx:for="{{ e.data }}" wx:for-item="poi" wx:key="poi.id">
<image src="{{ poi.cover_s }}"></image>
<view class="mask"></view>
<view class="name">{{ poi.name }}</view>
</view>
</view>
</block>
</view>
|
二、wxss样式文件代码如下：
page{
background-color: #f6f6f6;
}
.title{
color: #5c5c5c;
font-size: 30rpx;
margin: 20rpx;
}
.list{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
align-items: center;
padding: 0 20rpx;
margin-bottom: 50rpx;
}
.poi{
position: relative;
margin-bottom: 12rpx;
}
.poi image{
width: 349rpx;
height: 349rpx;
border-radius: 8rpx;
vertical-align: bottom;
}
.poi .mask{
width: 100%;
height: 80rpx;
position: absolute;
bottom: 0;
left: 0;
background-image: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0));
border-bottom-left-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
.poi .name{
position: absolute;
left: 28rpx;
bottom: 24rpx;
color: #fff;
font-size: 40rpx;
font-weight: bold;
}
|
三、js页面代码如下：
const api = require('../../utils/api.js');
const App = getApp();
Page({
data: {
elements: [],
windowWidth: App.systemInfo.windowWidth,
},
onReady() {
},
onLoad() {
const self = this;
wx.showToast({
title: '正在加载',
icon: 'loading',
duration: 10000,
});
api.getExplorePlaceList({
success: (res) => {
const dest = res.data;
self.setData({
elements: dest.elements,
});
wx.hideToast();
},
});
},
viewPOI(e) {
const data = e.currentTarget.dataset;
wx.navigateTo({
url: `../destination/destination?type=${data.type}&id=${data.id}&name=${data.name}`,
});
},
});
|
.jpg)
.jpg)
