首页 > 小程序教程 > 微信小程序产品识别码查询结果页面设计制作开发教程

微信小程序产品识别码查询结果页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序产品识别码查询结果页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/index/verificationDetail.wxml-->
<view class="container">
  <view class="Codeinfo">
    <view class=" font-size-18 font-color-c24e4e margin-bottom-40">查询结果</view>
    <view class="font-color-999 margin-bottom-40">查询识别码:<text class="font-color-c24e4e">{{info.code}}</text>
    </view>
    <view class="line"></view>
    <view class="margin-bottom-40 margin-top-50">产品名称:<text class="font-color-hei">{{info.name}}</text></view>
    <view class="margin-bottom-40">产品规格:<text class="font-color-hei">{{info.norm}}</text></view>
    <view class="margin-bottom-40">生产厂家:<text class="font-color-hei">{{info.factory}}</text></view>
    <view class="margin-bottom-40">生产批次:<text class="font-color-hei">{{info.batch}}</text></view>
    <view>质量体系:<text class="font-color-hei" >{{info.system}}</text></view>
  </view>
</view>
 
二、wxss样式文件代码如下:
/* pages/index/verificationDetail.wxss */
.Codeinfo{
    background-color: #fff;
    margin-top:20rpx;
    padding: 40rpx;
    color: #999999;
}
.line{
    width: 670rpx;
    height: 2rpx;
    background-color: #dcdcdc;
}
.margin-bottom-40{
    margin-bottom: 40rpx;

}
.margin-top-50{
    margin-top:50rpx; 
}
三、js页面代码如下:
// pages/index/verificationDetail.js
Page({
  data:{
      info:{
        code:null,
        name:'永泰老酒1953',
        norm:'500ml/瓶',
        factory:'仁怀市茅台镇永泰酒业有限公司',
        batch:'2015-06 A108',
        system:'ISO-9002-2000'
      }
    },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
      'info.code':options.code
    })
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

模板简介:该模板名称为【微信小程序产品识别码查询结果页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 23,936次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-13
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
单页式简历模板 微信文章 html5 微信素材 企业网站 微信图片 微信模板 微信公众平台 表格式简历模板 自适应
您可能会喜欢的其他模板