小程序开发：组件

block

组件是页面的基本组成单元，例如视图容器的 view, 基础内容的 text, 表单的 button 等，完整列表。

注意，<block /> 可以来包含一组组件，但是 <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

将上述循环代码替换为：

<view wx:for='{{num}}' wx:for-index='i' wx:for-item='num1'>
  <block wx:if='{{num1%2==0}}'>
    {{num1}}是偶数
  </block>
  
  <block wx:else>
    {{num1}}是奇数
  </block>

</view>

滚动图片

编码代码：所有设置都不能写死

swiper组件：高度占整个屏幕的1/3

movie.wxml:

<!--pages/movie/movie.wxml-->
<view>
<swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoPlay}}' circular='{{circular}}'interval='{{interval}}'>
  <block wx:for='{{images}}'>
    <swiper-item>
        <image src='{{item}}'></image>
    </swiper-item>

  </block>
</swiper>

</view>

movie.js:

// pages/movie/movie.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    images: [
      "../../icons/1.jpg",
      "../../icons/2.jpg",
      "../../icons/3.jpg"
    ],
    indicatorDots: true,
    autoPlay: true,
    circular: true,
    interval:1000
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

app.json:

{
  "pages": [
    "pages/movie/movie",
    "pages/home/home",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true,
    "backgroundColor": "#939393",
    "navigationBarBackgroundColor": "#939393",
    "navigationBarTitleText": "电影资讯",
    "navigationBarTextStyle": "red"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/movie/movie",
        "text": "热映电影",
        "iconPath": "icons/dy-1.png",
        "selectedIconPath": "icons/dy.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "home",
        "iconPath": "icons/search-1.png",
        "selectedIconPath": "icons/search.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/dy-1.png",
        "selectedIconPath": "icons/dy.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "icons/search-1.png",
        "selectedIconPath": "icons/search.png"
      }
    ],
    "backgroundColor": "#939393",
    "color": "#fff",
    "selectedColor": "#FF6655"
  }
}

段落布局

movie.wxml:

<view>
<swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoPlay}}' circular='{{circular}}' interval='{{interval}}'>
  <block wx:for='{{images}}'>
    <swiper-item>
        <image src='{{item}}'></image>
    </swiper-item>

  </block>
</swiper>

<view class='movie'>
    <view class='pic'>

      <image src='../../icons/1.jpg'></image>
    </view>
    <view class='movie-info base-info'>
      <text>
        电影名称：XXXX \n 导演：XXX \n 电影类型：XX,XX,XX \n上映时间
      
      </text>
    </view>

</view>
<view class='movie'>
    <view class='pic'>
      <image src='../../icons/1.jpg'></image>
    </view>
    <view class='movie-info base-info'>
      <text>
        电影名称：XXXX \n 导演：XXX \n 电影类型：XX,XX,XX \n上映时间
      
      </text>
    </view>
</view>
</view>

movie.js:

同上。

movie.css:

/* pages/home/home.wxss */
.content{
  background-color: "#000";
  height: 100%;
}

.pic image{
  width: 100px;
  height: 150px;
  vertical-align: top
}

.movie{
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  border-bottom: 1px solid #838

}
.movie-info{
  padding-left: 20px;
}
.base-info{
  color: #000;
  font-size: 12px;
  padding-top: 20px;
  line-height: 20px;
}

返回 微信小程序应用开发