微信小程序开发笔记--02

最新推荐文章于 2022-04-23 20:36:24 发布

我有甜甜

最新推荐文章于 2022-04-23 20:36:24 发布

阅读量306

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序开发文章标签：微信小程序开发

本文链接：https://blog.youkuaiyun.com/qq_39925376/article/details/87377532

微信小程序开发专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了微信小程序中底部导航栏的设计方法，包括颜色设置、页面路径配置及图标选择。同时，展示了如何布局界面元素，如使用WXML进行图片引用和文本展示，并提供了界面美化样式代码。

1.底部导航栏

  "tabBar": {
      "color": "#fff", 
      "backgroundColor":"#000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"pages/images/0.jpg",
        "selectedIconPath":"pages/images/3.jpg"	
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "pages/images/1.jpg",
        "selectedIconPath": "pages/images/4.jpg"
      }]
  }

在这里插入图片描述
2.布局界面

<!--ame.wxml-->           //引用图片
<view class="container">
 <view><image src="../images/0.jpg" mode="cover"></image></view>
</view>

<view>微信网页版 - 搜狗百科</view>
 <view>2014年2月20日，腾讯宣布推出QQ浏览器微信版，由QQ浏览器与微信两个产品线团队合作，联合开发了QQ浏览器微信版，即微信浏览器。在即将发布的浏览器中，..</view>
 <view>内容介绍</view>
 <view>登录方法</view>
 <view>主要功能</view>
 <view>退出方法</view>

在这里插入图片描述
3.变量替换

4.界面美化

/* pages/me/ame.wxss */
.ame{ }
.ame-a{text-align: center;}
.ame-img{display: block;width: 120px;height: 110px;margin:20px auto 0;}
.ame-title{display: inline;margin: 20px 0;}
.ame-intro{text-indent: 2em;font-size: 16px;margin: 0 20px;line-height: 1.5;}
.ame-c{font-size: 16px;line-height: 2;text-indent: 2em;}
.ame-context{margin-top: 20px}
.in-img{width: 120px;height: 110px;}

 <view class="ame-img"><image src="{{img}}" 
 class="in-img" background-size="cover" model="scaleToFill"></image></view>

在这里插入图片描述