微信小程序之口红试色 - weapp_lipstick

2017-07-17      49      JavaScript
项目简介

weapp_lipstick

微信小程序之口红试色

最近微信小程序开始火起来 作为全栈的学习者 也跟风最近撸了一个��。试问哪个小仙女的彩妆盒里没有那么几只口红呢?还在苦于为为繁多的口红牌子颜色找功课嘛,同作为深陷彩妆坑的美少女,就决定撸下了口红试色的微信小程序demo,快捷简单的找到想到的试色��,下面我们就一起来看下这个小demo吧。

开发工具

1.开发调试工具: 小程序开发者平台 安装好之后 初学稍微看下简易文档啦~(≧▽≦)/~

2.开发文档: 小程序开发必备文档 阅读文档了解页面搭建、数据渲染、导航跳转、列表跳转等。

目录结构

├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── detail
│   │   ├── detail.json
│   │   ├── detail.js
│   │   ├── detail.wxml
│   │   └── detail.wxss
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── list
│   │   ├── list.json
│   │   ├── list.js
│   │   ├── list.wxml
│   │   └── list.wxss
│   └── log
│       ├── log.js
│       ├── log.json
│       ├── log.wxml
│       └── log.wxss
├── images
│  
└── utils
  └── util.js

页面注册

app.json

"pages":[
    "pages/list/list", //品牌检索页
    "pages/detail/detail", //试色详情页
    "pages/index/index",
    "pages/logs/logs"
    ]

效果预览

项目功能

  • 带字母滑动或点击选择的列表页面
  • scroll-view的使用,可滚动视图区域生成
  • 类似tab切换效果

具体功能解析

1.带右侧字母滑动的列表界面✌️

需要实现的功能:

(1)侧nav与内容区的联动

(2)内容区名字绑定相应的图片

具体的实现过程:

侧nav与内容区的联动

右边点击不同的字母,左边转到相应字母的内容 这里的实现,用到了scroll-view的API 给每个左边的内容对象渲染时附上id

<scroll-view scroll-y style="height: {{windowHeight}}" scroll-into-view="{{alpha}}">
<view wx:for="{{list}}" wx:key="unique" id="{{item.brand}}" class="section-item">

具体实现的JS逻辑部分

onLoad(options){
    try {
      var res = wx.getSystemInfoSync()
      this.pixelRatio = res.pixelRatio;
      // this.apHeight = 32 / this.pixelRatio;
      // this.offsetTop = 160 / this.pixelRatio;
      this.apHeight = 16;
      this.offsetTop = 80;
      this.setData({windowHeight: res.windowHeight + 'px'})
    } catch (e) {

    }
  },
  handlerBrandTap(e) {
    let {ap} = e.target.dataset;
    this.setData({alpha: ap});
  },
  handlerMove(e) {
    let {list} = this.data;
    let moveY = e.touches[0].clientY;
    let rY = moveY - this.offsetTop;
    if(rY >= 0) {
      let index = Math.ceil((rY - this.apHeight)/ this.apHeight);
      if(0 <= index < list.length) {
        let nonwAp = list[index];
        nonwAp && this.setData({alpha: nonwAp.brand});
      }
    }
  },

内容区域图片与文字绑定

HTML结构

<view class="brand-list">
    <view wx:for="{{list}}" wx:key="unique" id="{{item.brand}}" class="section-item">
      <view class="section-item-header">
        {{item.brand}}
      </view>
      <view wx:for="{{item.datas}}" wx:key="unique" wx:for-item="cell" wx:for-index="cellIndex" class="section-item-cells">
        <navigator url="../detail/detail" redirect="false" hover-class="navigator-hover">
          <view class="section-item-cell {{cellIndex != (item.datas.length-1) ? 'border-bottom':''}}">
            <image class="brand_pic" src="{{cell.img}}"/>
            <text class="brand_p">{{cell.text}}</text>
          </view>
        </navigator>
      </view>
    </view>
  </view>

js数组部分

{brand: 'Top',datas: [{img:'../../images/1.png', text: 'Armani'},
                         {img:'../../images/2.png',text:'Anastashia Bevely Hills'}]},

类似tab切换效果✌️

设置四个按钮 每个按钮赋予不同的点击事件

<view class="box">
   <button type="default" bindtap="btn_change1" class="button1" style="color: #818181;">小胖丁</button>
   <button type="default" bindtap="btn_change2" class="button2" style="color: #818181;">红管唇釉</button>
   <button type="default" bindtap="btn_change3" class="button3" style="color: #818181;">红管CC唇膏</button>
   <button type="default" bindtap="btn_change4" class="button4" style="color: #818181;">黑管唇釉</button>
 </view>

将数据写入点击事件中

(因为要大量数据,且是重复工作,没有意义,就没有写入mock里面 有兴趣的小伙伴可以尝试��)

btn_change1: function() {
    this.setData({
     name: "Armarni 阿玛尼",
     image: "../../images/4_.png",
     price: "340",
     label: "阿玛尼小胖丁染唇液(LIP MAGNET)是阿玛尼2016年全新推出的产品,以其更加显色、更加轻薄和持久的特点红遍时尚圈。",
     hot: "#504、#506",
     pic: "../../images/xpd_detail.png"
   })
 },

❕❕❕ 敲黑板的小细节 (自己走过的坑��)

之前将数据都放在一个数组里 点击进入第二个界面时 不点击按钮 就没有内容显示

应该把进入第二页显示的单独放入一个数组 点击传出的数据放在另外一个数组 这样互不影响

data: {
        comment: [],
        details: []
           },

总结

1.初学要多看文档,书写格式和api的使用,不要怕写错,多上手撸撸就明白了。

2.因为不太熟悉踩了一些坑

(1)就是上面提到的,数据绑定问题,第二个页面要切换数据,要分两个数组写。

(2)由第一个页面中传递过来的数据不在是一个数组,而是一个对象,得到其id就得到其内容。