小程序（1702H）

小程序（1702H）

gif:

1.运行请求本地连接

2.wx:for

{{myItem.title}}

3.wx.request

wx.request({ url: ' method: 'get', success:(res) => { console.log(res) if (res.data.code === 200) { let data = res.data.data this.setData({ navTitle: data.navtitle, navData: data.navdata, currentList: data.navdata[0].content }) } } })

4.usingComponents

{ "usingComponents": { "navItem": "../../components/nav/nav", "listItem": "../../components/listItem/item" }}

5.子组件触发父组件的方法

this.triggerEvent('HandleNavClickFromComponent', {tempindex})

6.使用子组件

7.子组件里定义方法

methods: { handleNavClick2(e) { let {tempindex} = e.currentTarget.dataset console.log(tempindex) this.triggerEvent('HandleNavClickFromComponent', {tempindex}) } }

8.子组件接收父组件传递来的属性

properties: { currentId: Number, navTitle: Array },

9.github地址：​​{ "color": "#333333", "selectedColor": "#f66f0c", "backgroundColor": "#ffffff", "borderStyle": "black", "position": "bottom", "list": [ { "text": "首页", "selectedIconPath": "./static/index-active.png", "iconPath": "./static/index.png", "pagePath": "pages/index/index" }, { "text": "通讯录", "selectedIconPath": "./static/find-active.png", "iconPath": "./static/find.png", "pagePath": "pages/list/list" }, { "text": "购物车", "selectedIconPath": "./static/cart-active.png", "iconPath": "./static/cart.png", "pagePath": "pages/cart/cart" }, { "text": "我的", "selectedIconPath": "./static/me-active.png", "iconPath": "./static/me.png", "pagePath": "pages/me/me" } ] }

13.scrollview相关

{{item.key}} {{item.name}}

handleScroll(e) { let scrollTop = e.detail.scrollTop let {listItemTops} = this.data for (let i = 0; i < listItemTops.length; i++) { if (scrollTop >= listItemTops[i]) { this.setData({ currentIndex: i }) } } },

page{ height: 100%;}

14.查询页面里元素已经元素的位置

wx.request({ url: " success: (res) => { console.log(res) if (res.data.code === 200) { let data = res.data.data this.setData({ list: data.items }, () => { const query = wx.createSelectorQuery(); query.selectAll('.js-list-item').boundingClientRect((res) => { console.log(res) this.setData({ listItemTops: res.map(item => item.top) }) }).exec() }) } } })

15.通讯录

16.跳转页面的两种写法：

第一种是绑定事件：

详情

todetail({currentTarget}){ let {id} = currentTarget.dataset; wx.navigateTo({ url:'/pages/detail/detail?id='+id }) },

第二种是直接使用组件：

详情2

17.列表跳转详情：

请求后端接口，传递页码和每页数据的条数。后端返回新数据。把新数据拼接到旧数据后面。

getData() { let {page,limit} = this.data wx.request({ url: ' data: { page, limit }, success: (res) => { console.log(res) let {list} = this.data list = list.concat(res.data.data) this.setData({ list }) } }) },

scroll-view组件滚动到底部时触发bindscrolltolower上绑定的handleScrollToEnd方法。页码数加一后，再次请求新数据。

handleScrollToEnd(e) { console.log(e) let {page} = this.data page = page + 1 this.setData({ page }, () => { this.getData() }) },

onLoad: function (options) { console.log(options) let {id} = options wx.request({ url: ` success: (res) => { console.log(res) this.setData({ detail: res.data.data }) } }) },

mock数据：

const Mock = require('mockjs')const day4ListData = Mock.mock({ 'detail|500':[ { name:'@cname', 'rate|1-5':1, image:'@image(300X300)', 'price|300-1500':1, title:'@ctitle', address: Mock.Random.city(true), email: '@email' } ]})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。