第二个小程序

￡神魔★判官ぃ 2022-06-02 03:24 204阅读 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 条评论，204人围观）

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

相关阅读

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

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

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

相关几个小程序。

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

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

相关第二章第二个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 赞/ 214 阅读

相关第二个小程序

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

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

相关第一个小程序

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

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

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

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

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

相关微信小程序第二天—小白之路

1. 一般微信小程序中pages数组下面的第一项元素代表了启动需要显示的第一个页面。 2.如果pages目录下面创建一个目录posts，在page中如果设置错误，比如说："p

我不是女神ヾ/ 2022年05月22日 06:52/ 0 赞/ 237 阅读

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

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

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

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

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

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

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

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

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