zoukankan      html  css  js  c++  java
  • 小程序template

    首先写模板,然后调用模板

    moban.wxml

    <template name="wode">
    <view wx:for="{{wd}}">
    <image src='{{item.src}}' mode='aspectFill'></image>
    <text>{{item.text}}</text>
    </view>
    </template>
     
    moban.wxss
    text {
    color: red;
    text-align: center;
    display: block;
    }

    image {
    100rpx;
    height: 100rpx;
    display: block;
    margin: 0 auto;
    }

    调用

    <!--pages/demo/demo.wxml-->
    <import src="../moban/moban" />
    <view>
    <template is="wode" data="{{...item}}" />
    </view>
    /* pages/demo/demo.wxss */
    @import "../moban/moban.wxss";
    // pages/demo/demo.js
    Page({

    /**
    * 页面的初始数据
    */
    data: {
    item: {
    wd: [{
    src: 'http://pic.pptbz.com/201506/2015070581208537.JPG',
    text: '你好'
    },
    {
    src: 'http://pic.pptbz.com/201506/2015070581208537.JPG',
    text: '是的'
    },
    {
    src: 'http://pic.pptbz.com/201506/2015070581208537.JPG',
    text: '也是'
    },
    {
    src: 'http://pic.pptbz.com/201506/2015070581208537.JPG',
    text: '我的'
    },
    ]

    }
    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    },

    })
  • 相关阅读:
    微信小程序开发入门(六)
    JS计算日期加上指定天数得到新的日期
    Java中substring()
    List集合去除重复数据
    按钮倒计时
    jQuery中each方法
    Math三个函数
    jQuery表单提交
    jQuery 序列化表单数据
    正则取小数点后面几位
  • 原文地址:https://www.cnblogs.com/ylblogs/p/9708455.html
Copyright © 2011-2022 走看看