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

正在开发一个商城类的小程序,现在有一个比较棘手的就是需要可以在后台设置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

回到顶部