微信小程序：菜单栏

2023-08-17 05:35| 来源: 网络整理| 查看: 265

菜单栏的主要实现方式就是嵌套view，做好每一层的view的设计。

要注意的是在放图片的时候记得要把图片嵌套在view里面，然后把图片的wxss设置为width：100%，height：100%。

设计页面的时候可以先给每个区设置background-color和border，这样可以最直观的看到你设计的效果对不对，最后再把这两个样式删掉就可以了。

这里做的主要是中间：动漫、电影、综艺、直播的菜单栏导航。

是在js的data里面把每个菜单的图片、名字都设置成一个对象，然后存在一系列数组里面，最后循环遍历出来

效果图：

one.js

// pages/forview/forview.js Page({ /** * 页面的初始数据 */ data: { topimg:"../images/logo.jpg", links:[{"text":"动漫","url":"a1","img":"../images/dm.png"}, {"text":"电影","url":"a2","img":"../images/dy.png"}, {"text":"综艺","url":"a3","img":"../images/zy.png"}, {"text":"直播","url":"a4","img":"../images/zb.png"}] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

one.json

{ "usingComponents": {} }

one.wxml

【本文地址】

公司简介

联系我们