微信小程序开发轮播图

1.json页面

[
    "pages/index/index",
    "pages/detail/detail",
    "pages/result/result",
    "pages/logs/logs"
  ],

2.index.wxml

<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">  
   <block wx:for="{{headimg}}" wx:for-index="index">  
    <swiper-item>  
     <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>  
    </swiper-item>  
   </block>  
</swiper>

其中：

swiper 标签表示滑块视图容器；
swiper-item 标签则表示滑块的条目；
block 标签表示一个标签块
我们可以看到，在 block 标签中，我们为其设置了 wx:for 属性，这个属性用于列表渲染，绑定了 Page 的 data 中的 headimg 数组（在微信小程序中，WXML 中的动态数据都来自于对应 JS 文件 Page 中的 data 数据）。

3.index.wxss

 height: 400rpx;
 width: 100%;
}
.swiper image {
 height: 100%;
 width: 100%;
}

图片列表

wxml
<view class="temp_box">
  <block wx:for="{{templist}}">
    <view class="temp_item">
      <navigator url="../detail/detail?tid={{item.id}}">
        <image src="https://www.huabandata.com/{{item.icon}}"></image>
        <view class="content">
          <text>{{item.name}}</text>
        </view>
      </navigator>
    </view>
  </block>
</view>

/* 模板图片列表 */
.temp_box {
    margin: 3px;
    width: 100%;
}
.temp_item {
    display: inline-block;
    width: 48%;
    margin: 0.5%;
    background-color: white;
}
.temp_item image {
    width: 100%;
    height: 160px;
}
.temp_item .content {
    width: 100%;
    height: 32px;
    margin: 5px;
}
.temp_item .content text {
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

image.png

详情页面 detail.wxml

<view class='temp'>
  <image src='https://www.xxx.com/{{tempData.img}}'></image>
</view>
<form bindsubmit='generate'>
  <view class="form">
    <view class='li'>
      <image class='icon' src='http://www.xxx.com/media/resume/icon_user.png'></image>
      <input class='input' placeholder='请输入{{tempData.hint}}' name='content'></input>
    </view>
</view>
<button class="button" form-type='submit'>立刻生成照片</button>
</form>

detail.wxss

page{background-color: #efeff4}
.temp{
  background-color: white;
  border: #e5e5e5 solid 1px; 
  display: flex; 
  align-items: center;
  justify-content:center;
}
.temp image{
   height: 320px;
}
.form{
  margin-top: 20rpx; 
  background-color: white;
  border: #e5e5e5 solid 1px; 
  border-right: none;  
  border-left: none;  }
.li{
  height: 100rpx; 
  border-bottom: #e5e5e5 solid 1px; 
  width: 90%; 
  margin: auto; 
  display: flex; 
  align-items: center }
.input{padding-left: 20rpx;  width: 94%; color: black}
.icon{
  width: 50rpx;
  height: 50rpx;
}
.button{
    background-color: #09bb07; 
    margin: auto; 
    margin-top:20rpx;
    margin-bottom: 20rpx;  
    width: 90%; 
    color: white 
}

image.png

result.wxml：

<view class='temp'>
  <image src='https://www.xxx.com/{{imgurl}}'></image>
</view>
<button class="button" form-type='submit' bindtap='savePhoto'>保存照片</button>

reault.wxss：

.temp{
  background-color: white;
  border: #e5e5e5 solid 1px; 
  display: flex; 
  align-items: center;
  justify-content:center;
}
.temp image{
   height: 320px;
}
.button{
    background-color: #09bb07; 
    margin: auto; 
    margin-top:20rpx;
    margin-bottom: 20rpx;  
    width: 90%; 
    color: white 
}

image.png