怎么设置小程序的banner？
发布于 5 年前 作者 achang 12570 次浏览 来自 问答

正在开发一个商城类的小程序，现在有一个比较棘手的就是需要可以在后台设置banner，然后做跳转，跳转到对应的页面去，这个现在怎么实现？如果使用链接跳转怎么获取跳转链接？

4 回复

目测你问得太早；

从你的文字中可以判断：

1、组件navigator，你不懂，这属于入门知识了；

2、wxml语法你不熟；因为看文字，你不知道从后台拿到数据后如何展示；

3、swiper组件你也不熟；

4、不知道如何跳转，那么可能是不懂小程序页面结构，不懂wx.navigateTo；

。。。

慢慢学吧，基本知识先补全。

你后台配置 前端获取的时候加个跳转链接不就好了么。不行还有高级版的万能跳转。

<swiper wx:for="{{bannerList}}" wx:key="index">
  <view bindtap="handleClick" data-url="{{item.url}}">
     <image src="{{item.banner}}" mode="widthFix" />
  </view>
</swiper>

data: {
  bannerList: [{
    banner: 'https://xxxx/xxx.png', // banner图片
    url: '/pages/xxx/xxx' // 跳转链接
  },{
    banner: 'https://xxxx/xxx.png', // banner图片
    url: '/pages/xxx/xxx' // 跳转链接
  }]
},
handleClick(e) {
  const { dataset: {url}} = e.currentTarget
  wx.navigateTo({
    url
  })
}

1.使用swiper开发轮播图

2.每个swiper-item添加点击事件

3.轮播图数据返回格式

[
{
  type:"inside"，
  pagePath: "页面路径"，
  imagePath: "图片路径"
 },
{
  type:"web"，
  pagePath: "链接地址"，
  imagePath: "图片路径"
 }
      ]

4.点击根据type值设置跳转方式就行

5.做成后台可配置的轮播图参数就更完美了

接口获取数据展示然后点击跳转啊 banner可以用这个https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

回到顶部