微信小程序开发demo二

app.json是公共Json

• 添加底部菜单tab
• 添加轮播图组件

1、添加底部菜单tab

在json文件中不要在代码中加注释，eg：//用来注释，json文件不要添加注解

"tabBar": {
    // 背景色
    "backgroundColor": "#bc162c",
    // 背景文字
    "color": "#8a8a8a",
    // 高亮背景文字
    "selectedColor":"#fff",
    "list": [
        {        
        "pagePath": "pages/index/index", // 路由页面
        "text": "首页", // 路由文字
        "iconPath":"images/home1.png", // 默认显示图标必须是图片81*81
        "selectedIconPath":"images/home.png" // 高亮显示图标
        },
        {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath":"images/log1.png",
        "selectedIconPath":"images/log.png"
        }
    ]
}

添加tab的样式如下： 

2、添加轮播图组件

双大括号：表示数据绑定，支持简单的表达式

wx:for：表示列表渲染，使用item表示数组数据；使用index表示数组的下标

<!--index.wxml-->
<view>
<swiper indicator-dots="indicatorDots"
        indicator-color="#FFF"
        indicator-active-color = "#bc162c"
        autoplay="{{autoplay}}" 
        interval="{{interval}}" 
        duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image"/>
    </swiper-item>
  </block>
</swiper>
</view>

//在Page({})中加入data 
data: {
    imgUrls: [
      '/images/vue.png',
      '/images/angular.png',
      '/images/react.png'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  },

.slide-image{
  width: 100%;
  height: 300rpx;
}

样式如下：

3、添加可滚动组件

<!--index.wxml-->
<scroll-view class="scroll-view" scroll-x="true">
    <view class="scroll-view-item"  wx:for="{{viewDatas}}">
      <view class="view-item-title" style="width:100rpx;word-break: break-all;">
          <text >{{item.title}}\n</text>
          <text>￥{{item.price}}</text>
      </view>
      <view>1111</view>
      <image class="view-item-image" src="{{item.imgUrl}}" style="width:200rpx;height:200rpx;"></image>
    </view>
</scroll-view>

<!--index.js--> 
viewDatas: [{
      title: "使用知识点综合运用实例",
      price: "299.00",
      imgUrl: "/images/home.png"
    }, {
      title: "Vue+Webpack打造web应用",
      price: "229.00",
      imgUrl: "/images/home.png"
    }, {
      title: "React知识点综合运用实例",
      price: "329.00",
      imgUrl: "/images/home.png"
    }, {
      title: "微信小程序入门",
      price: "99.00",
      imgUrl: "/images/home.png"
    }]

<!--index.css--> 
viewDatas: [{
      title: "使用知识点综合运用实例",
      price: "299.00",
      imgUrl: "/images/home.png"
    }, {
      title: "Vue+Webpack打造web应用",
      price: "229.00",
      imgUrl: "/images/home.png"
    }, {
      title: "React知识点综合运用实例",
      price: "329.00",
      imgUrl: "/images/home.png"
    }, {
      title: "微信小程序入门",
      price: "99.00",
      imgUrl: "/images/home.png"
    }]

样式如下图：

4、单行溢出解决

<view class="view-text">  <text>1234567890987654321`123456789009876543211234567890987654321`123456789009876543211234567890987654321`12345678900987654321`</text>
</view>

.view-text{
  /*解决单行溢出*/
  width: 490rpx;
  max-width: 490rpx;
  display: -webkit-box;
  word-break: break-all;
  overflow:hidden; 
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  /*最大行数限制*/
  /*-webkit-line-clamp: 5;*/
}