第二个小程序

￡神魔★判官ぃ 2022-06-02 03:24 224阅读 0赞

app.json

{
      "pages":[
        "pages/index/index"
      ],
      "window":{
        "navigationBarBackgroundColor": "#5C4338"
      }
    }

index.wxml

<view>
      
      <swiper indicator-dots="true" autoplay="true" interval="4000" circular="true">
        <swiper-item>
          <image src="/images/banner1.png"></image>
        </swiper-item>
        <swiper-item>
          <image src="/images/banner2.png"></image>
        </swiper-item>
        <swiper-item>
          <image src="/images/banner3.png"></image>
        </swiper-item>
      </swiper>
      <view class="Sec1">
        <view class="sec1">
          <image src="/images/pg.jpg" class="sec1_img"></image>
          <text class="sec1_date">2017.11.16</text>
        </view>
        <view>
          <image src="/images/sg1.jpg" class="sec2_img"></image>
        </view>
        <view class="sec3">
          <text>石榴，红红的，好吃。</text>
        </view>
        <view class="sec4">
          <image src="/images/icon1.jpg"></image>
          <text>45</text>
          <image src="/images/icon2.jpg"></image>
          <text>96</text>
        </view>
      </view>
      <view class="Sec1">
        <view class="sec1">
          <image src="/images/pg.jpg" class="sec1_img"></image>
          <text class="sec1_date">2017.11.16</text>
        </view>
        <view>
          <image src="/images/sg1.jpg" class="sec2_img"></image>
        </view>
        <view class="sec3">
          <text>石榴，红红的，好吃。</text>
        </view>
        <view class="sec4">
          <image src="/images/icon1.jpg"></image>
          <text>45</text>
          <image src="/images/icon2.jpg"></image>
          <text>96</text>
        </view>
      </view>
    </view>

index.wxss

page{
      background: #ddd;
    }
    swiper,.Sec1{
      background: #FFF;
    }
    swiper image{
      width: 100%;
    }
    .Sec1{
      margin-top: 50rpx;
    }
    .sec1{
      margin-left: 20rpx;
    }
    .sec1_img{
      width: 60rpx;
      height: 60rpx;
      vertical-align: middle;
    }
    .sec1_date{
      display: inline-block;
      margin-left: 20rpx;
      vertical-align: middle;
      padding-top: 20rpx;
    }
    .sec2_img{
      width: 100%;
    }
    .sec3{
      margin-left: 10rpx;
    }
    .sec3>text{
      font-size: 30rpx;
    }
    .sec4{
      margin-left: 10rpx;
    }
    .sec4>image{
      width: 50rpx;
      height:50rpx;
      vertical-align: middle;
    }
    .sec4>text{
      vertical-align: middle;
    }

index.json

{
      "navigationBarTitleText": "水果市场"
    }

index.js

const app=getApp()
    
    Page({
      
    })

效果图：

![20180102115527023][]

![20180102115610195][]

疑惑：class Sec1改成其他的，页面不对了。

[20180102115527023]: /images/20220602/6f3d350c62064ec2bd4663455bb9d5fc.png
[20180102115610195]: /images/20220602/e115f69b802a47679b6e3ccb77ffe966.png

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关【小程序】第一个小程序——创建小程序项目

目录小程序简介第一个小程序安装开发者工具创建小程序项目小程序简介 1. 小程序与普通网页开发的区别 ![17e1b9a120564ed2b1c85

曾经终败给现在/ 2024年03月30日 11:07/ 0 赞/ 93 阅读

相关第二讲第一个Python程序

在上一课中，我们对 Python 语言的过去现在有了一些了解，我们准备好了运行 Python 程序所需要的解释器环境。相信大家已经迫不及待的想开始自己的 Python 编程之旅

我不是女神ヾ/ 2023年09月26日 21:06/ 0 赞/ 134 阅读

相关几个小程序。

1.输入18岁及以上可以进入网站，18以下的可以按Y进入N不进入 include <stdio.h> void in_age(int age)

小灰灰/ 2022年09月17日 12:15/ 0 赞/ 217 阅读

相关第二章第二个spring-boot程序

[http://www.cnblogs.com/java-zhao/p/5336369.html][http_www.cnblogs.com_java-zhao_p_53363

不念不忘少年蓝@/ 2022年06月15日 12:58/ 0 赞/ 232 阅读

相关第二个小程序

app.json { "pages":[ "pages/index/index" ], "window":{

￡神魔★判官ぃ/ 2022年06月02日 03:24/ 0 赞/ 225 阅读

相关第一个小程序

app.json { "pages":[ "pages/index/index" ], "window":{

分手后的思念是犯贱/ 2022年06月02日 03:17/ 0 赞/ 324 阅读

相关微信小程序第二篇实战

-------------------- title: 微信小程序第二篇实战 date: 2018-03-08 02:33:00 tags: WeChat

拼搏现实的明天。/ 2022年05月30日 08:53/ 0 赞/ 292 阅读

相关微信小程序开发——第一个小程序

这几个月都在忙着准备考研都不怎么研究代码了，前几天老师安排要做毕业设计的开题报告，所以就稍微兼顾着学习了点微信小程序的开发。昨天看了一会官方给的开发文档就是实例少了点，不过有个

我就是我/ 2022年05月14日 08:36/ 0 赞/ 351 阅读

相关微信小程序-开发第二周

微信小程序—尝试开发第二周上周实现了一些基本的图片处理,这周继续页面进行改进。同时，和老师讨论之后，决定新增加社交功能以及自己搭配配方等功能。微信小程序轮

本是古典何须时尚/ 2022年02月28日 05:44/ 0 赞/ 275 阅读

相关 opencv的第二个程序：图像腐蚀

毛星云《OpenCV3编程入门》的1.5.2程序（P30，第30页）：第二个程序：图像腐蚀 ![在这里插入图片描述][watermark_type_ZmFuZ3poZ

我会带着你远行/ 2021年11月01日 19:44/ 0 赞/ 287 阅读